cs基础

css基础

书写语法

选择器{

属性名:属性值;

}

tagname{}

.classname{}

#idname{}

css注释：

所要注释的内容

css选择器

基本选择器

1、通用元素选择器

*表示应用到所有的标签。

*{padding:0px;margin:0px;}

2、元素/标签选择器

匹配所有p标签的元素

p{color:red;}

3、类选择器

匹配所有class属性中包含red的元素。

语法：.类名{属性名:属性值;}

注意：类名不能以数字开头，类名要区分大小写

.red{color:red;}

<p class=”red”>我是p元素</p>

4、id选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的。

语法：#id名{属性名:属性值;}（id名不能以数字开头）

#green{color:green;}

<p id=”green”>我是p标签</p>

注意：

选择器优先级：ID选择器>class类选择器>标签选择器

相同属性优先级高的会覆盖掉优先级低的。

组合选择器

1、多元选择器

同时匹配h1,p，之间用逗号分开。

h1,p{color:red;}

<p>我是p元素</p>

2、后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔。

div p {color: red;}

<div>

<div>

</div>

</div>

3、子选择器

匹配所有div标签里嵌套的子p标签，之间用>分隔。

div > p {color: yellow;}

<div>

<div>

</div>

</div>

4、相邻元素选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）

div + p {color: yellow;}

<div>我是div</div>

<p>我是第一个p</p>

<p>我是第二个p</p>

属性选择器

包含标题（title）的所有元素变为红色

*[title] {color:red;}

根据部分属性值选择：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号~

选择 class 属性中包含 important 的元素

p[class~="important"] {color: red;}

子串匹配属性选择器

[class^="de"] 选择 class属性值以 "de" 开头的所有元素

[class$="de"] 选择 class 属性值以 "de" 结尾的所有元素

[class*="de"] 选择 abc 属性值中包含子串 "de" 的所有元素

特定属性选择类型

选择 lang 属性等于 en 或以 en- 开头的所有元素

*[lang|="en"] {color: red;}

<p lang="en">Hello!</p>

伪类选择器

1. link、hover、active、visited

a:link（未访问的链接状态）,用于定义了常规的链接状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:active（在链接上按下鼠标时的状态）。

a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

a:link{color: black}

a:hover{color: yellow}

a:active{color: blue}

a:visited{color: red}

2. :before、:after

p:before 在每个<p>元素的内容之前插入内容;

p:after 在每个<p>元素的内容之后插入内容。

p {

color: yellow;

}

p:before{

content: "before...";

}

p:after{

content: "after...";

}

<p> 我是p标签</p>　　

优先级：id>类>元素

注意：

组合选择器的优先级：根据组合选择器的权重进行计算，权重大的优先级就高。

组合选择器权重计算方式：各选择器权重相加之和，各选择器权重值如下：

cs基础

css的导入方式

行内：直接在标签内部写样式。

<p style="background: green;">我是一个P标签，我是一个P标签,我是一个P标签，我是一个P标签</p>

<p style="background: green;">我是一个P标签，我是一个P标签</p>

内联：用style标签包括，在head内的样式

cs基础

外联：引入外部css，可以引入多个css文件

cs基础

下面了解：

@import url(“url”)一般写在要要导入css的第一行，否则有的浏览器会忽略。

优先级：（!import>）行内>内联>外联（>@import）

(!import谨慎使用，一般不用)

<link>

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

常用属性

1. 颜色属性：

color

颜色：R:red 红色 G:green 绿色 B:blue蓝色

HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）

RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）

RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）

全透明，使用方式：color: transparent;

opacity

元素的透明度，语法：opacity: 0.5;

属性值在0.0到1.0范围内，0表示透明，1表示不透明。

filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

2. 字体属性:

font-size: 设置字体的大小

设置字体大小，单位px，如：font-size:14px;

font-style: 设置字体样式

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

font-weight: 设置字体的粗细

normal（默认）

bold（加粗）

bolder（相当于<strong>和<b>标签）

lighter （细）

100 ~ 900 整百（400=normal，700=bold）

font-family：文字的字体

黑体，宋体，微软雅黑

注意：中文加引号

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

line-height ：文字的行高

字体的行高，单位px，用于使文字垂直居中，如：line-height:30px;

可自己设置高度例：line-height:30px;当高度与行高相等时，文字垂直居中。

font：简写属性

语法：font：字体大小/行高字体;（字体名称要在最后）

3. 文本属性:

white-space: 设置元素中空白的处理方式

normal：默认处理方式。

pre：保留文本原来带的空格，当文字超出边界时不换行。

nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签

pre-wrap：保留空格，当文字碰到边界时换行

pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr 默认，文本方向从左到右。

rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

left

center

right

vertical-align: 文本所在行高的垂直对齐方式

baseline 默认

sub 垂直对齐文本的下标，和<sub>标签一样的效果

super 垂直对齐文本的上标，和<sup>标签一样的效果

top 对象的顶端与所在容器的顶端对齐

text-top 对象的顶端与所在行文字顶端对齐

middle 元素对象基于基线垂直对齐

bottom 对象的底端与所在行的文字底部对齐

text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本首行缩进

用于一段文字首行缩进，例:text-indent:30px;

letter-spacing: 添加字母之间的空白

设置字母之间的距离，例：letter-spacing:5px;表示各字母之间相距5px。

word-spacing: 添加每个单词之间的空白

值为数值型，单位px。

属性控制文本的大小写text-transform:

capitalize 文本中的每个单词以大写字母开头。

uppercase 定义仅有大写字母，全部转化为大写字母。

lowercase 定义仅有小写字母，全部转化为小写字母。

text-overflow: 文本溢出样式通常与overflow:hidden一起使用

clip 修剪文本。

ellipsis 显示省略符号...来代表被修剪的文本。

text-decoration: 文本的修饰

none 去掉下下划线/上线/删除线。

underline 下划线。

overline 上划线。

line-through 中线。

text-shadow：文本阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

text-shadow: 5px 5px 5px #888;

word-wrap：属性允许长单词或 URL 地址换行到下一行。

word-wrap: break-word;

cs基础

word-break：规定中文词语/英文单词的换行规则。

cs基础

4. 背景属性

background 背景属性

background-color: 背景颜色

英文

十六进制

rgba(red,green,blue,透明度)

透明度取值范围0-1之间

r,g,b取值范围0-255之间

rgb(red,green,blue)

background-image背景图片

background-image:url('img/girl1.jpg');

注意：默认重复铺满

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-repeat 背景重复

no-repeat 设置图像不重复，常用

repeat-y => y轴重复

repeat-x => x轴重复

background-position 设置背景图像的位置坐标

x轴距离

y轴距离

格式：background-position: x轴距离 y轴距离;

支持英文单词

center

left

right

top

bottom

background-position: center center; 图片置中，x轴center，y轴center

background-size背景大小

格式：background-size: 宽度高度;

cover 等比例铺满, 如果显示比例和显示区域的比例相差很大某些部分会不显示。

contain：正好相反，他是按照某一边来覆盖显示区域的，可能会留空白。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

background: url("o_ns.png") no-repeat 0 -196px;

background: url("o_ns.png") no-repeat center bottom ;

background: url("o_ns.png") no-repeat left 30px bottom ;

5. 列表属性

list-style-type: 列表项标志的类型

none 去除标志

decimal-leading-zero; 0开头的数字标记。(01, 02, 03, 等。)

square; 方框

circle; 空心圆

upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

inside 列表样式在li里面

outside 列表样式在li外面

list-style：缩写

cursor 鼠标的类型形状

/*鼠标悬浮成十字状*/

/*cursor: crosshair;*/

/*显示小手*/

/*cursor: pointer;*/

/*十字交叉箭头*/

/*cursor: move;*/

/*I*/

/*cursor: text;*/

/*加载圈滚动*/

/*cursor: wait;*/

/*问号*/

/*cursor: help;*/

/*禁止红圈斜杠*/

cursor: not-allowed;

overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

　　　　　　　　 cs基础　　　　

边框

1.border边框

border => 边框线

border:粗细样式颜色

粗细 => px

样式 => solid => 实线

dashed => 虚线

double => 双实线

dotted => 点状虚线

border-width：边框宽度单位px;

border-style：边框样式

solid 默认，实线

double 双线

dotted 点状线条

dashed 虚线

border-color：边框颜色

border: 简写

border: 2px yellow solid;

border-left:粗细样式颜色 => 左边框线

border-right:粗细样式颜色 => 右边框线

border-top:粗细样式颜色 => 上边框线

border-bottom:粗细样式颜色 => 下边框线

2.圆角边框

border-radius：圆角

1个参数：四个角都应用

2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上

3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下

4个参数：左上、右上、右下、左下（顺时针）

3.边框阴影

box-shadow：边框阴影

第一个参数是左右位置

第二个参数是上下位置

第三个参数是虚化效果

第四个参数是颜色

box-shadow: 10px 10px 5px #888;

outline 边框轮廓

outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式

盒子模型

cs基础

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

padding、margin	表示上右下左都应用
padding-top、margin-top	上
padding-right、margin-right	右
padding-bottom、margin-bottom	下
padding-left、margin-left	左

一个参数，应用于四边。

两个参数，第一个用于上、下，第二个用于左、右。

三个参数，第一个用于上，第二个用于左、右，第三个用于下。

display

none 不显示。

block 显示为块级元素。

inline 显示为内联元素。

inline-block 行内块元素（会保持块元素的高宽）。

list-item 显示为列表元素。

visibility

visible 元素可见

hidden 元素不可见

collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

float 浮动

让一行显示两个块级标签，会脱离文档流

none

left 左浮动

right 右浮动

clear 清除浮动：

none : 默认值。允许两边都可以有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许两边有浮动对象

position 规定元素的定位类型

static	默认值，没有定位，遵从正常的文档流
relative	相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
absolute	绝对定位元素，脱离正常文档流
fixed	绝对定位元素，固定在浏览器某处

通过以下四种属性进行定位：

left
top
right
bottom
z-index

z-index 元素层叠顺序

z-index 仅在定位元素上有效（例：position:absolute;）
可以指定负数属性值（例：-1;）

clip 剪裁图像

rect 剪裁定位元素：

auto 默认值，无剪切
上-右-下-左（顺时针）的顺序提供四个偏移值
区域外的部分是透明的
必须指定 position:absolute;

例：clip:rect(0px,60px,200px,0px);

transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值）

transform-origin: 50px 50px; transform-origin: left;。

rotate 旋转

transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。

skew 扭曲

transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。

scale 缩放

transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。

translate 移动

transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。

Transition 平滑过渡

transition-property：变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）

transition-duration：变换持续时间

transition-timing-function： 变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay：变换延迟时间

transition：缩写

transition: property duration timing-function delay;

animation 属性

cs基础

1.关键帧(@keyframes)

关键帧(keyframes) - 定义动画在不同阶段的状态。

动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）

css属性 - 就是css元素不同关键帧下的状态。

2.动画属性

动画属性可以理解为播放器的相关功能，一个最基本的播放器应该具有：播放/暂停、播放时长、播放顺序(逆序/正序/交替播放)、循环次数等。

主要也分为两大点：

指定播放的元素

定义播放信息的配置

1.时间函数（animation-timing-function）

animation-timing-function属性定义了动画的播放速度曲线。

可选配置参数为:

ease、

ease-in、

ease-out、

ease-in-out、

linear、

cubic-bezier(number, number, number, number)

2.动画方向（animation-direction）

animation-direction属性表示CSS动画是否反向播放。

可选配置参数为:

single-animation-direction = normal | reverse | alternate | alternate-reverse

animation-direction: normal 正序播放

animation-direction: reverse 倒序播放

animation-direction: alternate 交替播放

animation-direction: alternate-reverse 反向交替播放

animation-direction: normal, reverse

animation-direction: alternate, reverse, normal

3.动画延迟（animation-delay）

animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。

默认值0s，表示动画在该元素上后立即开始执行。

该值以秒(s)或者毫秒(ms)为单位。

4.动画迭代次数（animation-iteration-count）

animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。

默认值只播放一次。

5.动画填充模式（animation-fill-mode）

animation-fill-mode是指给定动画播放前后应用元素的样式。

single-animation-fill-mode = none | forwards | backwards | both

animation-fill-mode: none 动画执行前后不改变任何样式

animation-fill-mode: forwards 保持目标动画最后一帧的样式

animation-fill-mode: backwards 保持目标动画第一帧的样式

animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。

6.动画播放状态（animation-timing-function）

animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。

默认值为running

single-animation-timing-function = running | paused

running 动画正常播放

paused 动画暂停播放

简写：animation: ani timeingfunction delaytime infinite alternate;

基本选择器

组合选择器

属性选择器

伪类选择器

1. 颜色属性：

2. 字体属性:

3. 文本属性:

4. 背景属性

5. 列表属性

1.border边框

2.圆角边框

3.边框阴影

visibility

相关推荐