CSS全称为：Cascading Style Sheets,层叠样式表，用于为html元素定义style。
html中定义样式有三种方法：
1、行样式表 即在标签中使用style=" ";定义样式。如：
<p style="color:red; font-size: 30px; font-family: 隶书;background-color: #ccc; ">学而不思则罔，思而不学则殆。</p>
p标签的样式为：灰色背景，字体颜色为红色，大小30像素，隶书。
注意：样式的定义遵循层级就近原则；子元素不定义样式就会继承父类样式，定义就会覆盖父类样式。
<div style="color: blue;"> <p>我是div1的子元素，没有设置样式的话会继承div的样式</p> <p style="color: red;">我是div1的子元素，设置了样式，就会覆盖掉div的样式 <span> p标签中的子标签，没有设置样式，会继承p的样式，不会继承div的样式，遵循层级就近原则 </span> </p> </div>
2、嵌入样式表 即在head标签中通过style标签设置。如：
接触嵌入样式表就涉及到选择器，css根据写法不同，有以下几种选择器：
html选择器,class选择器,id选择器,关联选择器,组合选择器和伪元素选择器。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{color: red;}/*html选择器*/ p,h1{color: red;}/*组合选择器*/ .p1{color: blue;}/*class选择器*/ #p2{color: green; font-size: 20px}/*id选择器*/ p span{color: darkmagenta}/*关联选择器，只改变p下的span颜色*/ </style> </head> <body> <p class="p1">段落1</p> <p id="p2">段落2</p> <p>段落3 <span>与p关联</span> </p> <p>段落4</p> <h1>标题1 <span>与h1关联</span> </h1> </body> </html>
效果如下：
注意：id要具有唯一性，不要定义多个相同的id，在js程序调用时，用于指定id,在实际开发中要唯一定义。class可以定义多个相同的。
伪元素选择器是针对标签不同的状态的选择器。
3、引入样式表，即css样式
html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--此处因为css.css和html-style2在同一个目录下 可以href="css.css",否则要写绝对根目录--> <link rel="stylesheet" href="css.css" type="text/css"> </head> <body> <p>被设置了引入样式的段落</p> </body> </html>
css.css代码如下：
p{width: 500px; color: red; font-size: 30px; background-color: aqua; text-align: center}css和html-style2在同一目录下。
特别注意：
1、三种样式的级别优先级 行样式>嵌入样式>引入样式。
2、引入样式一般写在嵌入样式的上面。
3、符合后出现的先应用。
扫一扫
4823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
