我是做网站的,公众号平台入口,通辽网站建设通辽,常州网站营销推广目录
1. 基本语法格式
2. 引入方式
2.1 内部样式
2.2 内联样式
2.3 外部样式
3. 基础选择器
3.1 标签选择器
3.2 类选择器
3.3 ID选择器
4. 复合选择器
4.1 后代选择器
4.2 子选择器
4.3 并集选择器
4.4 伪类选择器 1. 基本语法格式
选择器若干属性声明
2. 引入…目录
1. 基本语法格式
2. 引入方式
2.1 内部样式
2.2 内联样式
2.3 外部样式
3. 基础选择器
3.1 标签选择器
3.2 类选择器
3.3 ID选择器
4. 复合选择器
4.1 后代选择器
4.2 子选择器
4.3 并集选择器
4.4 伪类选择器 1. 基本语法格式
选择器若干属性声明
2. 引入方式
2.1 内部样式
使用style标签直接把CSS写到HTML文件中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{/* {}中编写CSS属性可以写一个或多个每个属性都是一个键值对键和值之间用:分割键值对之间用;分割每个键值对既可独占一行也可不独占一行*/color:green;font-size: 30px;}/style
/head
bodyp这是一个段落/p
/body
/html 注style标签可以编写在代码的任何位置head标签中可以body标签中也可
2.2 内联样式
使用style属性针对指定的元素设置样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/head
bodyp stylecolor:green; font-size: 40px;这是一个段落/pp这是另一个段落/p
/body
/html 注1不需要写选择器直接写属性键值对此时只对当前元素生效
2内联样式的优先级高于外部样式的优先级
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color:red;}/style
/head
bodyp stylecolor:green; font-size: 40px;这是一个段落/pp这是另一个段落/p
/body
/html 2.3 外部样式
外部样式就是把CSS代码单独作为一个CSS文件再通过link属性令HTML引入该CSS文件
1在当前html文件所在文件夹下创建css文件名为STYLE.css
p{color:blue;font-size: 25px;
}
2在code2.html文件中引用CSS文件并运行如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefSTYLE.css
/head
bodyp这是一个段落/pp这是另一个段落/p
/body
/html
根据目录打开文件 注外部样式是在实际开发中最常见的编写CSS的方式这种方式可以有效实现HTML和CSS分离开来相互不影响。为演示简单方便教学中多采用内部样式
3. 基础选择器
3.1 标签选择器
在大括号前写标签名字表示选中当前页面中所有的指定标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep{color:goldenrod;font-size: 25px;}/style
/head
bodyp这是第一个段落/pdiv这是一个div/divp这是第二个段落/p
/body
/html
根据目录打开文件 所有的p标签都被设置了
3.2 类选择器
可以创建CSS类手动指定哪些元素应用这个类
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyle/* 定义一个CSS类类名为.one */.one{color:brown;}.two{color:darkgreen;}.three{color:cornflowerblue;}.four{font-size: 25px;}/stylediv classone这是第一个div/divdiv classtwo这是第二个div/divdiv classone这是第三个div/divdiv classthree four这是第四个div/div
/body
/html 注1此处的类与面向对象的类无关CSS的类是一组属性的集合方便其他地方引用
2在CSS中定义类名必须以.开头但在body对应段落中引用类时不需要再加.
3一个类可以被一个元素引用也可以被多个元素引用 一个元素可以引用一个类也可以引用多个类
4CSS全称为Cascading Style Sheets即层叠样式表即一个元素可以被应用多组样式的这些样式就像层层叠加一样在网页中打开DOM资源管理器选中第四个div查看样式 即第四个div最终效果是由font-size和color两个属性叠加起来的综合效果
3.3 ID选择器
HTML页面中的每个元素都可以设置一个唯一的id作为元素的身份标识给元素安排id后就可以通过id来选中对应元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#firstDiv{color:brown;}/style
/head
bodydiv idfirstDiv这是一个div/divdiv idsecondDiv这是另一个div/div
/body
/html 注1同一个页面中元素的id必须是唯一的跨页面可以存在重名的id
2对于类选择器允许令多个元素应用同一个类的 对于ID选择器则只能针对唯一的元素生效
4. 复合选择器
以上三选择器均属于简单的基础选择器除此之外CSS还支持一些更复杂的复合选择器即组合基础选择器
4.1 后代选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyleul li{color:brown;}.one li{color:forestgreen;}/styleol classoneliaaa/lilibbb/liliccc/li/ololliaaa/lilibbb/liliccc/li/olulliaaa/lilibbb/liliccc/li/ul
/body
/html
根据目录打开文件 注1写法含义为先去页面中查询所有的ul再在这些ul中查询所有的li此时页面中ol中的li是不会被选中的
2li只要是ul的后代即可不只是子元素孙代元素亦可
3后代选择器可以将多个简单基础选择器进行组合可以是标签、类、id选择器的任意组合
4.2 子选择器
子选择器也是将多个基础选择器进行组合但子选择器只找匹配的子元素不找孙代元素针对性更强
格式为选择器1选择器2{
属性...
}
比如基于以下body内代码 div classone!-- 链接1元素是one的子元素 --a href#链接1/a!-- p标签是one的子元素 --p!-- 链接2是one的孙子元素 --a href#链接2/a/p/div
分别使用后代选择器表示法空格与子选择器表示法
1后代选择器 style.one a{color:red;}/style
根据目录打开文件 子元素与孙代元素均被选择器选中变为红色
2子选择器 style.onea{color:red;}/style 子元素被选中变为红色
孙代元素没有被选中仍旧为默认色
4.3 并集选择器
语法格式为
选择器1, 选择器2{
属性...
}
含义为既针对选择器1生效又对选择器2生效即多组选择器应用了同样的样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.two{font-size: 25px;}.three{font-size: 25px;}/style
/head
bodydiv classonea href# classtwo链接1/apa href# classthree链接2/a/p/div
/body
/html
对于以上代码将two类与three类中的内容字体均设置为25px可以使用并集选择器实现 style.two, .three{font-size: 25px;}/style 运行结果如下 4.4 伪类选择器
伪类选择器是复合选择器的一种特殊用法。之前的选择器是选中某个元素但伪类选择器选中某个元素的某个特定状态
1:hover 鼠标悬停时的状态
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.one:hover{color:red;font-size: 40px;/* 表示鼠标悬停在内容上时字体变红且字体变为40像素*/}/style
/head
bodydiv classone这是一个div/div
/body
/html
运行后页面如下
鼠标未悬停在字体上时 鼠标悬停在字体上时 2:active 鼠标按下时的状态
