html片段：
<!DOCTYPE html>
<html>
<head>
<title>w的css</title>
<meta charset="utf-8">
<!--
css修改元素样式的第二种方式：（内部样式表）
将样式写到head的style标签里
然后通过css选择器来设置
优点：
可以为多个元素设置样式，修改时只用修改一处
缺点：
只能在一个页面起作用，不能跨页面使用
<style>
p{
color: aqua;
size: 60px;
}
</style>
-->
<!--
css修改元素样式的第三种方法：（外部样式表）
可以将css编写到一个外部的css文件中
然后通过link标签引入外部的css文件
样式可以在不同的网页之间复用
-->
<link rel="stylesheet" href="bing.css">
</head>
<body>
<!--
css修改元素的样式
css修改元素的样式第一种方式：（内联样式 行内样式）：
在标签内部通过style属性来设置元素的样式（属性：值；）
缺点：只对当前设置的这一个生效，如果还得用还要复制，如果换样式得所有的都换了
注意：开发时绝对不要使用行内样式
-->
<!--
<p style="color: aqua; font-size: 90px;">这是丙豪的网页</p>
这是用内联样式来写
-->
<!--
class标签：
和id类似，不同的是class可以重复使用，可以通过class给元素分组
可以同时为一个元素指定多个class元素，用空格隔开
-->
<h1 class="name h1">wangbinghao</h1>
<h2 class="ce">www</h2>
<p id="yellow">css的id选择器</p>
<p class="name">王</p>
<p class="ce">这里这里</p>
<span class="ce">这是span</span>
<span>啥也不是</span>
<p class="ha">lan</p>
<p id="ceec">乱写的</p>
<!--
父元素：
直接包含子元素的元素叫父元素
子元素：
直接被父元素包含的元素叫子元素
祖先元素：
直接或间接包含后代元素的元素叫祖先元素
父元素也是祖先元素
后代元素：
直接或间接被祖先元素包含的元素叫后代元素
子元素也是后代元素
兄弟元素：
拥有相同的父元素的叫兄弟元素
-->
<div class="hi">
div
<p>
div p
<br>
<span>
div p span
</span>
</p>
<span>
div span
</span>
</div>
<div class="ji">
div
<p>
divp
<span>
divpspan
</span>
</p>
<span>
divspan
</span>
</div>
<div >
<p title="a">a</p>
<p title="abec">abec</p>
<p title="abcdef">abcdef</p>
<p title="uadef">uadef</p>
</div>
<ul class="ul1">
<li>diyi</li>
<li>dier</li>
<li>disan</li>
<li>dishi</li>
</ul>
<ul class="ul2">
<li>diyi1</li>
<li>dier1</li>
<li>disan1</li>
<li>dishi1</li>
</ul>
<ul class="ul3">
<li>diyi2</li>
<li>dier2</li>
<li>disan2</li>
<li>dishi2</li>
</ul>
<a href="https://www.qqq.com">没访问过的链接</a>
<br>
<a href="https://www.baidu.com">访问过的链接</a>
<div class="ccc">
<p>
jijijijijahusdhaishduaishduiahudaoushdajskdahusdhaisuhduasdgsygaisydgshdshaksdgaisudgasyd
</p><br>
<span>
lalalallalaskdoajsidahosdhuaisgdiuagsdugaisudgaiusgidaugsiudgausgdiasydgsuaogsodagsuodgsuogdaousdoasudgaoshdaisd
</span>
</div>
<p class="jijiji">
唧唧唧唧唧唧唧唧
<span>急急急急急急急急</span>
</p>
<div class="xuanzeqi" id="xuanzeid">
选择器
</div>
<div class="v1">
<p class="v2"></p>
</div>
<div class="em"></div>
<div class="rem"></div>
<div class="color"></div>
</body>
</html>
css片段
/*
css的基本语法：
选择器；声名块
选择器：
通过选择器可以选用页面中的指定元素
比如p的作用就是选中页面中的p元素
声名块：
通过声名块来指定为元素设置的样式
声明由一个个声明组成
声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以：连接，以；结尾
*/
/*
元素选择器：
根据标签名来选中元素
语法：标签{}
举例：p{} h1{}
*/
h2{
color: aqua;
size: 50px;
}
/*
id选择器：
根据元素的id属性选择一个元素
语法：#id{}
举例：#red{} #jste{}
*/
#yellow{
color:yellow;
}
/*
类选择器：
根据元素的class值选中一组元素
语法.class属性值{}
举例：.name{}
*/
.name{
color: chocolate;
}
.h1{
font-size: 100px;
}
/*
通配选择器：
选中所有的元素
语法：*{}
*{
color:blue;
}
*/
/*
交集选择器：
选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意：选择器中如果有元素选择器，必须使用元素选择器开头
*/
p.ce{
color: blueviolet;
}
/*
选择器分组（并集选择器）：
同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器n{}
*/
p.ha,span.ce,#ceec{
color: chartreuse;
font-size: 70px;
}
/*
子元素选择器：
选中指定父元素的指定子元素
语法：父元素>子元素{}
这些可以连续写
*/
div.hi>span{
color: coral;
}
/*
后代元素选择器
选定指定内容内的指定后代元素
语法：祖先元素 后代元素{}
*/
div.ji span{
font-size: 77px;
}
/*
兄弟元素选择器
语法：兄+弟{}（会改变紧挨着的那个兄弟元素，中间不能有其他元素）
兄～弟{}(选择下边所有的兄弟元素)
选的都是下面的兄弟元素，在前面的兄弟元素不被选
*/
/*
属性选择器
语法：
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性的指定属性值的元素
[属性名^=属性值] 选择含有指定属性的指定属性值开头的元素
[属性名$=属性值] 选择含有指定属性的指定属性值结尾的元素
[属性名*=属性值] 选择含有指定属性的含有某属性值结尾的元素
[title]{
font-size: 50px;}
选择有title标签的
[title=a]{
font-size: 50px;}
选择有title标签并且值为a的
[title^=a]{
font-size: 50px;}
选择有title并且以a开头的
[title$=def]{
font-size: 50px;}
选择有title标签并且以def结尾的
[title*=e]{
font-size: 50px;}
选择有title标签并且含有e的
*/
/*
伪类选择器（不存在的类，特殊的类）：
伪类用来描述元素的特殊状态
比如：第一个元素、被点击的元素、鼠标移入的元素······
伪类一般情况下使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 某一个子元素
特殊值: n(0到正无穷)
2n 或 even ：选中偶数位的元素
2n+1或 add ：选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序（如果前面有其他的也会计数）
:first-of-type
:last-of-type
:nth-of-type()
这些伪类的功能和上诉的差不多，不同的是他们只在同类元素中排序
:not() 否定伪类
将符合条件的伪类从选择器中去除
*/
ul.ul1>li:first-child{
color: blue;
font-size: 60px;
}
.ul1>li:last-child{
color: yellowgreen;
font-size: 69px;
}
.ul1>li:nth-child(2){
color: brown;
font-size: 60px;
}
/*
这种但凡前面有一个其他的标签，都会失效，因为是对所有的子元素排序
*/
.ul2>li:first-of-type{
color: blueviolet;
font-size: 50px;
}
.ul2>li:last-of-type{
color: aquamarine;
font-size: 50px;
}
.ul2>li:nth-of-type(2){
color: brown;
font-size: 50px;
}
/*
这种不会失效，因为是对相同的子元素排序
*/
.ul3>li:not(:nth-child(3)){
color: blueviolet;
font-size: 70px;
}
/*
超链接伪类
:link 用来表示没访问过的链接（正常的链接）
:visited 用来表示访问过的链接
由于隐私的原因 visited不能改大小
:hover 鼠标移入的状态
:active 鼠标点击的状态
*/
a:link{
color: yellowgreen;
font-size: 60px;
}
a:visited{
color: brown;
}
a:hover{
color: blue;
font-size: 70px;
}
a:active{
color: blueviolet;
font-size: 80px;
}
/*
伪元素：页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用::开头
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 元素的开始
::after 元素的结尾
before和after必须结合content属性来使用
*/
.ccc p::first-letter{
font-size: 100px;
}
.ccc p::first-line{
background-color: rgb(255, 162, 11);
}
.ccc p::selection{
background-color: brown;
}
.ccc span::before{
content: "开始";
color: bisque;
}
.ccc span::after{
content: "结束";
color: blue;
}
/*
样式的继承：
为一个元素设置样式同时也会应用到它的后代元素上
继承的设计是为了方便开发：
利用继承可以将一些通用的样式设置到共同祖先元素上
这样只需要设置一次就可以让所有元素都具有该样式
注意：
不是所有的样式都会被继承，比如背景相关的布局相关的等不会被继承
*/
.jijiji{
color: chartreuse;
}
/*
样式的冲突：
当我们通过不同的选择器选择相同的元素，并且为相同的样式设置不同的值时，此时发生样式的冲突
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重：
内联样式：1 0 0 0
id选择器：0 1 0 0
类和伪类选择器：0 0 1 0
元素选择器：0 0 0 1
通配选择器：0 0 0 0
继承选择器：没有优先级
比较优先级时，需要将所有选择器的优先级进行相加，最后优先级越高，越优先显示
分组选择器是单独计算的
选择器的累加不会超过其最大的数量级，例如：类的选择器再多，也不可能优先级超过id选择器
如果优先级计算相同，此时优先选用靠下的样式
可以在某一个样式后面加 !important 此时这个样式的优先级最高，甚至超过内联样式
注意：在开发中，这个玩意儿慎用！！
*/
.xuanzeqi{
color: blue !important;
}
#xuanzeid{
color: brown;
}
#xuanzeid{
color: burlywood;
}
/*
长度单位：
像素
显示器实际上是由一个个小点点构成的
不同屏幕的像素大小不同，像素越小屏幕显示效果越清晰
百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使其跟着父元素的改变而改变
em
em是相对于元素的字体大小来计算的
1em = 1fontsize
em会根据字体大小改变而改变
rem
rem根据根元素的字体大小计算
字体默认大小为16px
*/
.v1{
width: 200px;
height: 200px;
background-color: brown;
}
.v2{
width: 50%;
height: 50%;
background-color: blue;
}
.em{
width: 10em;
height: 10em;
font-size: 25px;
background-color: aquamarine;
}
.rem{
width: 10rem;
height: 10rem;
font-size: 40px;
background-color: cadetblue;
}
/*
颜色单位：
css可以直接写颜色名
RGB值：
每一个数的范围在0 - 255之间（0%-100%）
语法：RGB（r，g，b）
RGBA值：
四个值，a表示不透明度（0-1）
语法：RGBA（r，g，b，a）
十六进制RGB值：
语法：#红绿蓝
颜色浓度：00-ff
如果颜色两位两位重复，可以简写
#aabbcc == #abc
HSL值：
H：色相（0 - 360）
S：饱和度（0% - 100% ）
L：明度 （0% - 100%）
*/
.color{
width: 100px;
height: 100px;
background-color: blue;
background-color: rgb(122, 220, 200);
background-color: rgba(231, 123, 100, .5);
background-color: #0f9c3b;
background-color: #abc;
background-color: hsl(200, 70%, 30%);
}
699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
