定义
网页三个部分
-
结构(HTML)
-
表现(CSS)
-
行为(JavaScript)
层叠样式表(CSS)
-
网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式
-
而最终我们能看到的只是网页的最上边一层
-
CSS用来设置网页中元素的样式
使用CSS来修改元素的样式
方法一 style属性(内联样式,行内样式)
定义与使用
-
在标签内部通过style属性来设置元素的样式
-
内联样式,行内样式
-
字体颜色color
-
字体大小font-size
-
<p 样式="名字:值;"> 操作的内容</p> 注意 : 和 ; 修改字体颜色展示 <p style="color:red;">操作的内容</p> 修改字体大小展示 <p style="font-size:60px;">操作的内容</p> 同时修改 <p style="color:red; font-size:40px;">修改的内容</p>
-
缺点
-
使用内联样式,样式只能对一个标签生效
-
如果希望影响到多个元素必须在每一个元素中都复制一遍
-
并且当样式发生变化时,我们必须要一个一个的修改,非常不方便维护
-
注意:
-
开发时绝对不要使用内联样式
-
方法二 head中的style属性(内部颜色表)
定义与使用
-
内部样式表
-
将样式编写到head中的style标签里
-
然后通过CSS的选择器来选中元素并为其设置各种样式
-
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部使用
-
<head> <style> 元素名{属性:***;属性:***} </style> </head> 让所有的<p>操作的内容</p>都变成同一个样式 <head> <style> p{ color:red; font-size:50px; } </style> </head>
-
缺点
-
我们的内部样式表只能对一个网页起作用
-
它里边的样式不能跨页面进行复用
方法三link标签(外部样式表)最佳实践
定义与使用
-
将CSS样式编写到一个外部的CSS文件中
-
然后通过link标签来引入外部的CSS文件
-
创建一个 .CSS CSS文件内所写与< style > 中所写格式相同< /style >
-
外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用
-
使样式可以在不同页面之间进行复用
-
将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的家族速度,提高用户的体验
-
创建一个 .CSS CSS文件内所写与<style>中所写格式相同</style> 属性{ color :颜色; } <link 属性="可选择"href="路径"> <link 属性="样式表" href="样式表的路径"> <link rel="stylesheet" href="CSS全局命令.css">
-
CSS的基本语法
CSS中的注释
-
CSS中的注释,注释中的内容会自动被浏览器所忽略
-
格式: /* 注释内容 */
选择器
-
选择器,通过选择器可以选中页面中的指定元素
-
比如P的作用就是选中页面中所有的P元素
-
< style >
中间写声明块
< /style >
-
元素选择器 元素{}
作用
-
根据标签名来选中指定的元素
语法
-
标签名{}
例子
-
p{} h1{} div{} 块行均可
id选择器 #id{}
作用
-
根据元素的id属性值选中一个元素
语法
-
#id属性值{}
例子
-
<p id="red"> 识之律者女士万岁</p> <p id="box">识宝 老古董在和琪亚娜贴贴</p> <style> #red{ color:"red"; font-size:60xm; } #box{ color="yellow"; } </style>
类选择器 .class{}
作用
-
根据元素的class属性值选中一组元素
-
class是一个标签的属性,它和id类似,不同的是class可以重复使用
-
可以通过class属性来为元素分组
-
可以同时为一个元素指定多个class属性
-
语法
-
.class属性值{}
例子
-
<h1 class="one">识之律者女士万岁第一次</h1> <h2 class="one"> 识之律者女士万岁第二次 </h2> <p class="one"> 识之律者女士万岁第三次 </p> <style> .one{ color:red; } </style>
通配选择器 *{}
作用
-
选中页面中的所有元素
语法
-
语法 *{}
举例
-
<style> *{ color:red; } </style>
交集选择器 选择器选择器选择器{}
作用
-
选中同时复合多个条件的元素
语法
-
选择器1选择器2选择器3选择器n{}
注意点:
-
1.选择器和选择器之间没有任何的连接符号
-
2.选择器可以使用标签名称/id名称/class名称
-
3.企业开发中用的并不多
举例
-
<style> .red{} div.red{} abc{} 既是a又是b还是c </style> <div class="red">div的说</div>
分组选择器(并集选择器)
作用
-
同时选中多个选择器对应的元素
-
可多个选择器组合使用
语法
-
选择器1,选择器2,选择器3,选择器n{}
举例
-
<style> 选择器a,选择器b{ 操作内容 } #b1,.p1,h1,span,div.red{} </style>
关系选择器(父子兄弟选择器)
作用
-
父元素
-
直接包含子元素的元素叫做父元素
-
-
子元素
-
直接被父元素包含的元素是子元素
-
-
祖先元素
-
直接或间接包含后代元素的元素叫做祖先元素
-
一个元素的父元素也是它的祖先元素
-
-
后代元素
-
直接或间接被祖先元素包含的元素叫做后代元素
-
子元素也是后代元素
-
-
兄弟元素
-
拥有相同父元素的元素是兄弟元素
-
语法
-
举例
-
<style> <div class="box"> <p>div中的p元素 <span>p中的span元素</span> </p> <h1>div中的h1元素</h1> </div> </style>
子元素选择器
作用
-
选中指定父元素的指定子元素
语法
-
父元素>子元素
举例
-
div.box>span{}
后代元素选择器
作用
-
选中指定元素内的指定后代元素
语法
-
祖先 后代 (中间隔开空格)
举例
-
div span{}
兄弟元素选择器
作用
-
选择下一个兄弟
语法
-
前一个+下一个
举例
-
p+span{}
作用
-
选择下边所有的兄弟
语法
-
兄~弟
举例
-
p~span{}
属性选择器
作用
-
可与元素选择器等混合使用
语法
-
[属性名] 选择含有指定属性的元素
-
[属性名=属性值]选择含有指定属性和属性值的元素
-
[属性名^=属性值]选择属性值以指定值开头的元素
-
[属性名$=属性值]选择属性值以指定值结尾的元素
-
[属性名*=属性值]选择属性值中含有某值的元素的元素
举例
-
<body> <p title>one</p> <p title="abc">two</p> <p title="acdsdabc">three</p> <p> four</p> </body> <style> [title]{} p[title]{} p[title=abc]{} p[title^=abc]{} p[title$=abc]{} p[title*=abc]{} </style>
伪类选择器
伪类(不存在的类,特殊的类)
-
伪类用来描述一个元素的特殊状态
-
比如:第一个子元素、被点击的元素、鼠标移入的元素……
-
伪类选择器
-
伪类一般情况下都是使用:开头
-
:first-child 第一个子元素
-
:last-child 最后一个子元素
-
:nth-child()选中第n个子元素
-
特殊值:
-
n 第n个 n的范围0到 +∞
-
2n或even 表示选中偶数位的元素
-
2n+1或odd 表示选中奇数位的元素
-
-
以上这些伪类都是根据所有的子元素进行排序
-
:first-of-type
-
:last-of-type
-
:nth-of-type()
-
这几个伪类的功能和上述的类似,不通点是他们是在同类型元素中进行排序
-
:not() 否定伪类--(除了什么)
-
将符合条件的元素从选择器中去除
-
<style> ul>li:not(:nth-child(3)){} </style> ul>li:not(:nth-child(3)){} :nth继续前面指的是li:nth-child()
-
-
-
-
举例
-
<style> ul>li:first-child{} ul>li:last-child{} ul>li:nth-child{} ul>li:nth-child(even){} ul>li:nth-child(2n+1){} </style>
超链接的伪类
-
:link 用来表示没访问过的链接(正常的链接)
-
:visited 用来表示访问过的链接
-
由于隐私的原因,所以visited这个伪类只能修改链接的颜色
-
-
适用于所有元素
-
:hover 用来表示鼠标移入的状态(不只限于超链接的伪类)
-
:active 用来表示鼠标点击的状态(所有元素都可以)
-
举例
-
<style> a:link{ color:red; font-size:50px; } a:visited{ color:orange; } a:hover{} a:active{} </style>
-
伪元素选择器
伪元素
-
伪元素表示页面中一些特殊的并不真实的存在的元素(特殊的位置)
-
伪元素使用 :: 开头
伪元素选择器
-
::first-letter{} 表示第一个字母
-
::first-line{} 表示第一行
-
::selection 表示选中的内容
-
::before 元素的开始
-
after 元素的最后
-
before和after必须结合content属性来使用
-
before和after的内容无法选中
-
-
举例
-
<p> this is a fuhua </p> <div>l love fuhua</div> <style> p::first-letter{ fron-size:50px; } p::first-line{ background-color:greenyellow; } p::selection{} //举例为在div中内容自动上引号 div::before{ content: "; color:red; } div::after{ content:; } </style>
声明块
-
声明块,通过声明块来指定要为元素设置的样式
-
声明块由一个个声明组成
-
声明是一个名值对结构
-
一个样式名对应一个样式值,名和值之间以 :连接 以 ;结尾
-
最后一个的;可以省略其余不可 但是为了避免出错全不省略
-
-
声明块 p{ } h1{ } 声明 p{ color:red; 声明 font-size:40px; 声明 }
-