<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
网页分成三个部分:
结构(html)
表现(css)
行为(JavaScript)
css样式:
——层叠样式
——网页其实是一个多层的结构,通过css可以分别为网页的每一层设置样式
——而最终我们只能看到网页的最上面一层
——总之:css用来设置网页中元素的样式
1.第一种方式:(内联样式/行内样式)一对一
在标签内部可以通过style属性设置样式元素
<p style="color: blue;font-size: 60px;">标签内部可以通过style属性设置样式元素</p>
<p>局限性太小</p>只能针对一个标签生效
到时候数多的时候不方面修改
2.第二种方式:(内部样式表)一对多
在<head> <style> p{设置样式}</style> </head>标签里面添加style标签
通过选择器来选中元素来设置其的各种样式
可以为多个标签设置样式,并且修改的时候修改同一处即可
内部样式表只能对本页面起作用(不能用到别的页面)
3.第三种方式(外部样式表)
可以将css样式编写一个外部的文件.css
然后通过link标签来引入外部的css文件(想用就引入就可以)
<link rel="styleheet" href="./style.css">
意味着只要想使用这些样式的网页都可以对其进行引用
使用样式可以在不同页面之间进行复用
将样式编写到外部的css文件中,可以使用到浏览器的缓存机制
从而加快网页的加载速度,提高用户的体验效果
css语法:
/* css的注释 */
1.选择器p 声明块{}
选择器:
通过选择器可以选中页面中的指定元素
比如 p标签的作用就是选中页面中的所有元素p{}
声明块:
通过声明块来指定要为元素设置的样式
声明块是一个一个声明组合
声明是一个名值对结构
一个样式名对应一个样式值,名和值之间可以连接以;结束
1.元素选择器(标签)
根据标签来选择指定中的元素
语法:标签名{}
例子:p{} h1{} div{}
2.id选择器(设置属性id来选择#)
如果单独设置该标签:可以使用元素的id属性值来单独设置
语法:#id属性值{}
例子:#box{} #red{}
<h1 id="biaoqian">#id属性值{}</h1>得出#biaoqian{}
class和id类似:id不可以重复,class可以重复
例如:<p class="blue">1</p>
例如:<p class="blue">2</p>
3.类选择器(class来选#):
根据元素的class属性值选中的一组元素可以重复使用
语法:.class属性值{}
class可以在一个元素中使用多次
<h1 class="biaoqian abc">.id属性值{}</h1>得出.biaoqian{}.abc{}
区分:
id:<h1 id="biaoqian">#id属性值{}</h1>得出#biaoqian{}
class:<h1 class="biaoqian">.id属性值{}</h1>得出.biaoqian{}
id命名不可以重复,class命名可以重复(类选择器)
4.通配选择器(*)
作用:选中页面中的所有元素
语法:*{}
一下实现所有的效果
5.复合选择器
1.交集选择器(div.red{})
作用:同时选择符合多个条件的元素
语法:选择器1选择器2选择器n{}:元素选择器.类选择器
例如:即的有div又得有red
<div class="red"></div>css样式:div.red{}
<p class="red"></p>
2.选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
例如:h1,span{实现同种样式}
<h1>hh</h1>
<span>hh</span>
在css中:h1,span,,,,{}不同标签用逗号隔开就可以
6.元素关系(嵌套)
1.父元素
-直接包含子元素的叫父元素
2.子元素
-有父元素的元素叫子元素(两层)
3.祖先元素(爷父孙)
-直接或间接包含后代的元素
一个元素的父元素也是他的祖先元素
4.后代元素
-直接或间接被包含的子元素
根元素的下面元素
5.兄弟元素
-具有相同父元素的是兄弟元素
7.子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
例如:div>span{}没有class的时候
例如:div.box>span{}有class的时候
例如:div>p>span{}子元素的子元素——父-子(父)—子
8.后代选择器(p元素中的span,div中的span儿子也是后代)
作用:选中指定元素中的后代元素
语法:祖先 后代
例如:div span{}空格隔开
例如:div p span{}空格隔开——后代的后代
9.兄弟选择器
语法:前一个+下一个
例如:p+span{}//紧挨着的span标签,中间有其他的都不行
例如:<p>p是div的子元素
<span>p是span的子元素</span>
</p>
<span> span和p是兄弟元素</span>
语法:前一个~下一个:表示这个兄弟下边的所有元素
例如:p~span{}后面都会显示
10.属性选择器
作用:
语法:标签[属性名]:p[title]{}
例如:<p title="鼠标选中显示的文字abc"></p>
语法:更加具体的标签[属性名=属性值]:p[title=abc]{}、p[title=zzz]{}针对性比较好(等于该标签)
例如:<p title="鼠标选中显示的文字zzz"></p>
语法:以属性值开头的所有属性[属性名^=属性值]:p[title^=abc]{}(^=以这样的开头就行)
例如:<p title="abc开头的都会显示该样式"></p>/<p title="abcef开头的都会显示该样式"></p>两个都可以实现
语法:以属性值结尾的所有属性[属性名¥=属性值]:p[title¥=abc]{}css样式一下实现两个(¥=以这样的结尾就行)
例如:<p title="abc结尾的都会显示该样式"></p>、<p title="edfabc结尾的都会显示该样式"></p>两个都可以实现
语法:以属性值有的字母的所有属性[属性名*=属性值]:p[title*=e]{}css样式一下实现两个(*=有就行)
例如:<p title="abce结尾的都会显示该样式"></p>、<p title="edfabc结尾的都会显示该样式"></p>两个都可以实现
11.伪类选择器:(伪类:不存在的类,特殊的类)
作用:描述一个特殊的状态
语法:ul>li:first.child{始终标记在第一个元素}:在ul的子元素li的第一个子元素,相当于标识第一个的一个关键字
语法:ul>li:last.child{始终标记在最后一个元素}
语法:ul>li:nth.child(第几个){始终标记在第()个元素}
特殊值:
n,第n个 n的值是0到正无穷
2n或even 表示的是偶数位
2n+1或odd 表示的奇数位
注意:考虑的是里面所有的元素进行排序的
所以:相同类型的排序有自己的语法:
ul>li:first——of——type
ul>li:last——of——type
ul>li:nth——of——type
ul>li:not(:nth-chlid(3)){除了第三个都会显示}
ul>li+tab/回车也可以 自动生成
<ul>
<il></il>
</ul>
12.超链接的伪元素
<a href="www.baidu.com">访问过点链接</a>
<br>
<a href="www.baidu123.com">没访问过的链接</a>
设置超链接的是否访问过的效果:
a:link{}//:link用来表示没访问过的连接(表示正常的链接)
a:vislted{}//用来表示访问过的链接 来设置效果(其他效果设置不了,隐私保护)
a:hover{}设置鼠标移入的时候的效果
a:active{}表示鼠标点击的效果
区分:
link和vislted是a超链接自己拥有的
hover和active所有标签都可以用
12.伪元素选择器::
作用:表示我们的页面中并不真实存在的元素:假想一个元素来设置样式
伪元素::开头
p::first-letter{
p标签的第一个字母;相当于加了一个span,但是不存在,所以说是伪元素
}
p::first-line{
第一行设置效果
}
p::selection{
表示鼠标选中内容来设置样式
}
但是通过content加文字,同时好处就是添加特殊的字符,不管内容多长都开加在起始位置和末尾位置
例如
div::befor{div的befor
content:文字(没有办法选中)
元素的起始位置
}
div::after{iv的after
content:文字(没有办法选中)
元素的最后位置
}
-->
<!-- <div class="box">div是p的父元素,是span的祖先元素
<p>p是div的子元素
<span>p是span的子元素</span>
</p>
<span> span和p是兄弟元素</span>
</div> -->
</body>
</html>