CSS3基础和使用规范

CSS

一、什么是css

​ 层叠样式表

二、命名方式

​ 数字字母下划线 不能以数字开头

三、css的使用格式

​ css的注释 /*注释内容*/ 注意：多行注释不能嵌套多行注释

四、使用css的方式

(1)内联方式（行内样式）不建议使用 维护困难

格式: <标签名 style=’样式’>

(2) 内部方式（内嵌样式）

格式：

<style type='text/css'>
    /* 写样式表 */
</style>

（3）外部导入方式（外部连接）

格式：

<link rel="stylesheet" type="text/css" href="">

当样式冲突的时候 遵循就近原则 优先级 行内>内嵌>外部导入

五、css的选择器

1. html选择器（不建议使用）

   格式：标签名{样式}

   特点：当前所有的此标签 都采用此样式 优先级最低

   例如：p{color:green;}

2. class选择器

   格式：

   ​ .class选择的名{样式}

   ​ <标签名 class=”名字”>

ID>CLASS>HTML选择器>html标签样式

1. 组合选择器

   选择符1,选择符2,选择符3{样式}

   *{样式} 不建议使用

   多个选择器 共用一个样式(用在页面样式的初始化 也就是将可能本身带样式的标签的样式去掉)

   ul,li,body,a,ol,li,dl,dt,dd{margin:0,padding:0;text-decoration:none;color:#000;} 外边距 内边距 为0 下划线去掉 颜色黑色

2. 关联选择器（包含选择符）

   格式：选择器1 选择器2 选择器3 选择器4{样式} 给选择器1里面的选择器2里面的选择器3 里面的选择器4设置样式

   p a{样式} 给所有的p标签里面的a设置样式

3. 伪类选择器

   /*只有hover 是重点  下面的顺序是固定的  否则可能有的样式显示不出来*/
   a:link{color:red; text-decoration:none;}/*未访问的链接的样式 红色去除下划线*/
   a:visited{color:#000;}/*以访问的超链接的样式 颜色黄色*/
   a:hover{color:green; font-size:20px;}/*鼠标在链接上的时候的样式*/
   a:active{color:blue; text-decoration:line-through;}/*鼠标激活时候的状态 蓝色 贯穿线*/

六 CSS3的选择器

1. 关系选择器

   ul>li 设置ul里面的直系li的样式

   ul+li 设置ul的紧邻着的li的样式

   ul~li 设置ul后面的所有同级兄弟li标签的样式

2. 属性选择器

   选择器[属性名]{} 查找某个标签内是否包含该属性

   选择器[属性名=属性值] 查找属性名等于当前属性值的标签

   选择器[属性名^=属性值] 查找属性名以某个属性值开头的标签

   选择器[属性名$=属性值] 查找属性名以某个属性值结束的标签

   选择器[属性名*=属性值] 查找属性名包含某个属性值的标签

3. 结构性伪类选择器

   :first-letter{} 设置第一个文字的样式

   :first-line{} 设置第一行文字的样式

   :before{content:”;} 设置在当前对象前插入内容 content必须有 相当于插入了一个span标签

   :after{content:”;} 设置在当前对象后插入内容 content必须有 相当于插入了一个span标签

   E:first-child{} E必须为某个元素的子元素 查找第一个子元素 这样才会生效

   E:last-child{} E必须为某个元素的子元素 查找最后一个子元素

   E:nth-child(n){} E必须为某个元素的子元素 查找第几个子元素

   E:nth-last-child(n){} E必须为某个元素的子元素 查找倒数第几个子元素

4. 状态伪类选择器

   :fouce{} 获取焦点时的样式

   ​

七 颜色的设置

1. rgb:红(r) 绿(g) 蓝(b)（取值范围0-255）

   background-color:rgb(255,255,255);

2. rgba: 红(r) 绿(g) 蓝(b) 透明度(a)（取值范围0-255）

   background-color:rgba(255,255,255,0-1);

3. 图片的透明度 (0-1)

   opacity

4. 十六进制 设置颜色

5. 英文单词设置颜色

八 font 字体的设置

font-style:italic;/*斜体 字体样式*/
font-weight:bold;/*加粗*/
font-size:16px;/*字体尺寸*/
line-height:40px;/*如果文字垂直居中 行高等于它的高度*/
font-family: 隶书,楷体;/*备胎的写法 如果没有第一个字体 name就使用第二个字体*/
/*组合式的写法*/
font:italic bold 16px/2 隶书; /*组合式的写法 注意 font-size font-family 必须要有*/

px  rem  em 的区别
px谁都不参照去设置字体的大小  em参照它父级的字体的大小  rem参照html根字体的大小

九 文本的属性

1. text-indent:em; 首行缩进

2. text-overflow:ellipsis;/文本超出显示…/

3. white-space:nowrap;/强制在一行去显示/

4. overflow:hidden; /超出文字隐藏/

   三个组合可以实现文字超出显示...
   1. text-overflow:ellipsis;/文本超出显示.../
   2. white-space:nowrap;/强制在一行去显示/
   3. overflow:hidden; /超出文字隐藏/

5. text-decoration:; none去掉/underline下划线/line-through贯穿线 字体划线

6. text-shadow:水平 垂直 模糊值 颜色; 文字阴影

7. letter-spacing:; 文字或字母的间距

8. word-spacing:20px;/单词间距/

9. word-break:break-all;/使外文换行/

十 border 边框

1. 分开来写

   /*设置某一边的样式*/ 
   border-right/left/top/bottom-width:3px;  /*宽度*/
   border-right/left/top/bottom-style:dotted/dashed/solid;/*点状线 虚线 实线*/
   border-right/left/top/bottom-color:blue; /*设置颜色*/

2. 组合式写法

   border:像素 样式 颜色;/四边的设置/

3. border-radius:50px; 圆角处理 园的半径是总宽度的一般

4. box-shadow:-10px -10px 10px 10px orange; /设置盒子阴影/

十一 background 背景属性

1. 分开的写法

   background-color:orange; /*背景色*/
   /*设置背景图片 如果背景图片的大小不能将这个div填满的划 会自动平铺*/
   background-image:url(C:/Users/xlg/Desktop/images/素材/1.gif);
   background-repeat:no-repeat;/*no-repeat不平铺 repeat-x 沿x轴平铺 repeat-y 沿y轴平铺*/
   /*背景定位 一个值*/
   background-position:bottom;center left right top bottom
   /*2个值*/
   background-position:bottom left;/*center left right top bottom*/
   /*3个值*/
   background-position:left top 100px;
   /*4个值*/
   background-position:left 100px top 100px;
   
   background-size:300px 10px;/*背景的大小 一个值 等比缩放 2个值 按照你给的宽高进行缩放*/
   
   background-attachment:scroll;/*是否固定背景 scroll不固定/fixed固定*/

2. 组合式写法

   background:red url(C:/Users/xlg/Desktop/images/素材/1.gif) no-repeat left 100px top 200px/200px fixed;

十二 内补白(内补丁/内边距)

padding:一个值; 代表上下左右的内边距的距离

padding:10px 20px; 2个值 代表 上下10px 左右 20px

padding:;三个值 第一个用于上，第二个用于左、右，第三个用于下。

padding:; 四个参数值，将按上、右、下、左的顺序作用于四边。

padding-top/left/right/bottom:; 单边的设置 距离顶/左/右/底部的内边距

注意：当设置了内边距的时候 那么外侧的宽高也会对应着你的内边距的值 发生改变 所以外部得宽高也需要对应着减少padding得像素值

十三 外补白(外补丁)

margin:一个值; 代表上下左右的外边距的距离

margin:10px 20px; 2个值 代表 上下10px 左右 20px

margin:;三个值 第一个用于上，第二个用于左、右，第三个用于下。

margin:; 四个参数值，将按上、右、下、左的顺序作用于四边。

margin-top/left/right/bottom:; 单边的设置 距离顶/左/右/底部的外边距

十四 float浮动

float:left/right/none ; 左浮动/右浮动/不浮动(左浮动 使用居多)

注意：浮动 是可以将 块级标签 浮动成一排 但是下面会为空 也就是说下面的正常的html标签 会跑到当前 浮动的块级标签的下面

十五 清除浮动

clear:left/right/none/both; 清除浮动 使用最多的就是both 清除左浮动/右浮动/左右浮动

overflow:hidden/; 清除浮动/超出隐藏

俩种：1直接在受影响的标签上 添加 clear的属性

​ 2 在受影响的标签前方 添加一个废弃的div标签 给这个标签加上一个clear的属性 （作用 只为了清除浮动）

十六 display 显示的方式

值：

​ none 隐藏 block块级 inline 行级 inline-block行级块级标签

十七 position 定位

relative/absolute/fixed 相对定位/绝对定位/固定定位

值： top/left/right/bottom

相对定位：相对于当前得位置 放生改变 但是其它得样式 不受其影响 常用于微调

绝对定位：参照于 当前得整个body体来定位 对其它得标签也不受影响

固定定位：和绝对定位一样 只是 在拖动滚动条得时候 本身位置 不受影响

要给某个元素设置绝对定位的时候 要对他的参照物设定一个相对定位；

​