CSS即Cascading Style Sheet(级联样式表)，是一种样式表语言，用于为HTML文档修饰外观，定义布局。
优先级:行级样式表 > 内嵌样式表 > 外部样式表
行级样式表直接定义在需要修饰的标签中，优先级最高。
<p style="color: red;font-size: 30px;"> 举头望明月， </p> 内嵌样式表定义在html文件中的head中，通过style标签声明，通过选择器进行选择修饰。
<!-- head中通过选择器等来修饰 --> <style type="text/css"> pre{ color: red; font-size: 20px; } </style> <!-- body中 --> <pre>举头望明月，</pre> <pre>低头思故乡。</pre> 外部样式表定义在.css文件中，通过在head中的标签导入html文件中
<!-- .css文件 --> div{ color: royalblue; font-size: 40px; } <!-- .html文件--> <!-- head标签中导入.css文件--> <link href="../css/css外部样式表.css" rel="stylesheet" type="text/css"/> <!-- body中--> <div>举头望明月，</div> <div>低头思故乡。</div>优先级: id > 类选择器 > 标签选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css选择器</title> <style type="text/css"> /* 标签选择器 */ label{ color: red; font-size: 40px; } /* 类选择器 */ .c{ color: lightblue; font-size: 20px; } /* id选择器 */ #i{ color: white; } /* 组合选择器 */ .c,#i{ background-color: #808080; } /* *通配选择器，匹配网页上所有的标签 */ *{ /* 将文本放在浏览器的正中央 */ text-align: center; } </style> </head> <body> <label>恰逢佳节</label> <p class="c">金秋送爽，万里河山披锦绣，</p> <p class="c">丹桂飘香，一轮明月寄深情。</p> <p id="i">万家灯火，赏良辰美景，</p> <p id="i">海上明月，观盛世繁华。</p> <p>月满中秋日，恰逢国庆日。</p> <p>举杯邀明月，共享好时节。</p> </body> </html> 后子代选择器 父标签：即直接包含子标签的标签子标签：即直接被父标签包含的标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css后子代选择器</title> <style type="text/css"> /* 后代标签选择器 */ p b{ color: red; } /* 子标签选择器 */ p > font{ color: skyblue; } /* 指定相邻标签 */ b + font{ /* 向后相邻 */ font-size: 30px; } /* 兄弟选择器 */ b ~ font{ /* 向后兄弟 */ background-color: black; } </style> </head> <body> <p> <font>尊重</font>自然, <b>顺应</b>自然， <font>保护</font>自然， <p> <b>可持续发展</b>，坚持<font>绿色</font>，包容，发展<font>理念</font> </p> <div> 构建人类生态<font>共同体</font> </div> </p> </body> </html> css修饰文本 color：字体颜色 font-size：字体大小 font-family：字体 text-align：文本对齐 text-decoration:line-through：定义穿过文本下的一条线 text-decoration:underline：定义文本下的一条线 text-decoration:none：定义标准的文本 font-style: italic;斜体文本 font-weight:字体粗细 line-height:设置行高 letter-spacing可以指定字符间距 text-indent用来设置首行缩进 css修饰背景 background-color背景颜色 background-image背景图片 background-repeat背景重复 background-size背景尺寸 background- position 背景位置 css修饰列表 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 list-style 简写属性 css修饰表格 /* 设置表格的边框为单边框 因为当cellspacing="0"时边框会重叠，变的粗黑*/ border-collapse: collapse;代码示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a标签的伪类</title> <style type="text/css"> /* 没有访问过的链接 */ a:link{ color: #87CEEB; } /* 访问过链接 */ a:visited{ color: red; } /* 鼠标移入时的状态 */ a:hover{ color: greenyellow; } /* 鼠标点击时 */ a:active{ color: blue; } </style> </head> <body> <a href="http:www.baidu.com">百度</a> <a href="https://www.sina.com.cn/">新浪</a> <a href="http:www.qq.com">腾讯</a> </body> </html>对于其他标签的伪类作用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 鼠标聚焦时 */ input:focus{ background-color: #87CEEB; } /* 鼠标移入时 */ p:hover{ color: red; background-color: #ADFF2F; } /* 鼠标点击时 */ p:active{ color: white; background-color: black; } </style> </head> <body> <label for="inp">账号:</label> <input type="text" id="inp"/> <p> 该文本只为测试p标签的伪类 </p> </body> </html>块级标签是一个可以设置宽高**(内容大小**)的标签，而且独占一行。
行级标签行级标签是个以内容撑开的标签，设置宽高是无效的，而且不独占一行。
行级块标签以内容撑开的标签，可以设置宽高,但是不独占一行。
通过css中的display可以改变标签的类型
inline改变为行级标签block改变为块级标签inline-block改变为行级块标签none直接隐藏掉该标签注意在html中有div标签(纯净版的块级标签)，span标签(纯净版的行级标签)这两个标签对文本不带任何修饰作用。
注意在盒子模型中，实际大小为内容区+内边距+边框，而外边距主要改变盒子的位置。
p标签默认会有一个16px的外边距。多个标签的外边距会重合(即外边距是标签到标签的距离，不是标签都外边距的距离)
*{ margin: 0; padding: 0; } 注意当设置以上的外边距和内边距之后，有时候会出现某些行级块标签中的align属性不可用(失效)，这时候就需要用style中的margin:auto来进行居中处理 在设置文本时可以通过设置父级内边距、行高来使文本居中。图片时我们可以设置这些的外边距来使其居中；还可以将图片设置为背景:不重复，设置父级标签的内边距。浮动的问题:
高度塌陷 ： 浮动元素没有撑开底层标签的空间 1、可以设置底层标签的空间大小 2、清除浮动，会自动撑开底层标签的高度 style=“clear: left”字体居中 1、可以通过设置内边距(注意内边距需要计算，因为内边距也是计算在内容大小的) 2、可以设置字体行高(设置高度为外标签的高度)定位会覆盖掉底层标签的内容。而浮动时(没有设置高或清除浮动时)底层标签的内容会环绕在浮动标签的周围。(定位和浮动都会提升一个层面)
案例：添加轮播图片上的箭头(绝对定位必须有参考系)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片轮播</title> <style type="text/css"> .body_photo{ width: 256px; height: 256px; display: block; margin: auto; /* 父级标签开启相对定位 */ position: relative; } .body_left_btn,.body_right_btn{ width: 30px; height: 30px; border-radius: 30px; background-color: #808080; text-align: center; line-height: 30px; opacity: 0.5; color: white; /* 开启绝对定位 */ position: absolute; top: 128px; } .body_right_btn{ right: 0px; } </style> </head> <body> <div class="body_photo"> <img src="../img/1.png" /><!-- 256*256 --> <div class="body_left_btn"> < </div> <div class="body_right_btn"> > </div> </div> </body> </html>效果图 1.png图片
