1.CSS简介：style属性一定是写在<head>中的
语法：
/*
①css的注释 /* */
②css语法
选择器（如P） 通过选择器可以选中页面中指定的元素
声明块 即{}中的部分
声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以:连接，以;结尾
P{
color: green;
font-size: 10px;
}
*/
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--②-->
<style>
h1{color: red;font-size: 30px;}
h2{color: yellow; font-size: 20px;}
</style>
<!--③link 写在head中-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>CSS简介</h1>
<!--使用css来修改元素样式
①在标签内部通过style属性设置元素的样式(内联样式/行内样式)
不推荐使用
-->
<!-- <p style="color: red; font-size: 10px;">少小离家老大回，乡音无改鬓毛衰</p> -->
<!--
②将样式编写到head中的style中
-->
<h2>少小离家老大回，乡音无改鬓毛衰</h2>
<!--③外部样式表：最佳样式
将CSS样式编写到一个外部的css文件中
通过link标签来引入外部css文件
link写到head中
极大提升样式复用程度
-->
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
2.常用选择器
<style>
/*
① 元素选择器：标签名{}
*/
p{color: yellow;}
/*
② id选择器：#id属性值{}; 只能改变一个元素; id不能重复
#id属性值{}
*/
#red{
color: red;
}
/*
将 落霞...一色 设置为蓝色
③ class选择器：类似id选择器，但可以重复使用
.class属性值{}
*/
.blue{
color: blue;
}
.abc{
font-size: 20px;
}
/*
通配选择器：选中页面中所以元素
*{}
当存在上述三种选择器时，通配选择器不显示
*/
/*
*{
color: red;
} */
</style>3.复合选择器
<style>
.red{
color: red;
}
/* 将class为red的div字体大小设为30px */
/* 交集选择器 */
div.red{
font-size: 30px;
}
/* 并集选择器(选择器分组) */
h1,span{
color: green;
}
</style>4.父子选择器
<style>
/*
父子 : 为div中的p设置为紫色 */
div > p {
color: purple;
}
/* 后代 : 改变后代中所有相同标签的元素 */
div span{
color: yellow;
}
/* 兄弟： 语法：前一个 + ： 下一个(只选择下一个)
~ ： 选择后面所有的兄弟
*/
p + span{
color: red;
}
p ~ span{
color:green;
}
</style>这里的p和span同为div下的子标签
5.属性选择器
<style>
/* ①[属性名]:选择含有指定属性的元素
②[属性名 = 属性值]：选择含有指定属性和属性值的元素
③[属性名 ^= 属性值]：选择的属性值以指定的值开头的元素
③[属性名 $= 属性值]：选择的属性值以指定的值结尾的元素
③[属性名 *= 属性值]：选择的属性值含有某值元素的元素
*/
p[title = abc]{
color: yellow;
}
/*
p[title = abc]{}
p[title ^= abc]{}
p[title $= abc]{}
p[title *= abc]{}
*/
</style>6.伪类选择器
<style>
/* 一般情况都是使用 开头
:first-child ：开头
:last-child：结尾
:nth-child(n)：任意值 (特殊值：n 表示全选 2n:表示选中的偶数 )
以上伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这些伪类的功能和上面的类似，不同点是他们是在同类型元素中进行排序
:not() 否定伪类
将符合条件的元素从选择器中剔除
*/
ul > li:first-child{
color: red;
}
ul > li:last-child{
color:yellow;
}
ul > li:nth-child(3){
color:blue;
}
</style>
7.超链接的伪类
<style>
/*
:link 表示未访问过的链接(正常的链接)
*/
a:link{
color: red;
}
/*
:visited 表示已经访问过的链接
由于隐私的原因，visited伪类只能修改链接的颜色
*/
a:visited{
color: black;
}
/*
:hover 表示鼠标移入的状态
*/
a:hover{
color: skyblue;
font-size: 30px;
}
/*
:active 表示鼠标点击
*/
a:active{
color:yellowgreen;
}
</style>8.伪元素
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1,p{
font-size: 10px;
}
/*
伪元素：表示页面中的一些特殊的并不真实存在的元素(特殊的位置)
使用 :: 开头
例 ::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 元素的开始
::after 元素的最后
-before -after 必须结合content属性使用
*/
p::first-letter{
font-size: 50px;
color: red;
}
h1::first-line{
font-size: 50px;
color: yellowgreen;
background-color: red;
}
h1::selection{
color:blue;
}
div::before{
content:"abc";
color: red;
}
div::after{
content:"def";
color: yellow;
}
</style>
</head>
<body>
<div>Hello hello How are you</div>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Rem enim ipsam, corporis voluptate illum, voluptatem placeat
dignissimos quasi doloribus quos debitis aliquid
reiciendis deleniti quas nemo cumque perferendis earum fuga.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Rem enim ipsam, corporis voluptate illum, voluptatem placeat
dignissimos quasi doloribus quos debitis aliquid
reiciendis deleniti quas nemo cumque perferendis earum fuga.</p>
</body>
9.选择器的权重
/*
样式的冲突
-当我们通过不同的选择器，选择相同的元素，并且为相同的样式设置不同的值
应用哪个样式时，由选择器的权重决定
选择器权重：(优先级)
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
继承的样式 (没有优先级)
比较选择器时，需要将所有的选择器的优先级相加计算，最后优先级越高，则优先显示
类选择器相加再高，也不会超过id选择器
如果优先级计算后结果相同，则优先使用靠下的样式(d1 d2)
但是，在某一个样式后加上!important,则此样式变为最重要的样式，优先显示
注意慎用！！！
*/
10.RGB与HSL
/*
在CSS中可以使用颜色名字来设置各种颜色，但并不方便
RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色
每一种颜色范围在0-255
语法：RGB(红色,绿色,蓝色):光的三原色
RGBA：在rgb基础上加一个a表示不透明度，需要四个值
1：不透明
.5：半透明（注意5前面有一个点)
0：全透明
十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度：00—ff
background-color: #ff0000;
HSL值 HSLA值
H 色相(0-360)
S 饱和度 :颜色浓度 (0%-100%)
L 亮度 :颜色亮度(0%-100%)
*/
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
