伪元素before和after
<!DOCTYPE html>
<html lang="en">
<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>伪元素</title>
<style>
ul>li::before{
/* */
content: "";
/* display：设置元素的性质 */
width: 50px;
height: 2px;
/* 设置背景颜色 */
background-color: yellow;
display: block;
}
ul>li::after{
/* 设置元素内容 */
content: "";
/* display：设置元素的性质 */
width: 50px;
height: 2px;
/* 设置背景颜色 */
background-color: red;
display: block;
}
</style>
</head>
<body>
<!-- 伪元素：通过css设置元素=》一般用于要实现某些效果，但是直接添加在html中会打乱结构
::before=>在...之前添加元素
::after=>在...之后添加元素
注意：伪元素选择器必须与content属性一起使用-->
<ul>
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</body>
</html>我们要注意的是伪元素要和content元素一块使用，里面放的是内容注意display元素的使用可把转换成行元素或者行内块元素都可以。
伪类选择器
<!DOCTYPE html>
<html lang="en">
<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>伪类选择器</title>
<style>
/* 效果是鼠标悬停在p，a的字体变成红色 */
p:hover>a {
/* 选择鼠标悬停的对象是p时，设置样式作用的对象是a */
color: red;
}
p {
width: 200px;
height: 40px;
background-color: green;
}
.text:link {
color: aqua;
}
.text:visited {
color: blue;
}
.text:hover {
color: red;
}
.text:active {
color: blueviolet;
}
</style>
<!--
:link=》未访问时
:hover=》设置鼠标悬停时的样式，所有元素都可以使用
:active=》鼠标按下不松开,其他元素也是可以的
:visited=》鼠标松开，被访问过
顺序：:link>:visited>:hover>:active -->
</head>
<body>
<p class="text">dhfkjdf
<!-- <a href="#">韩心身人却。</a> -->
</p>
<span class="text">爱光报。</span>
<a href="#" class="text">了几韩人败。</a>
<a href="#">Lorem, ipsum.</a>
</body>
</html>这类选择器一般针对链接使用，一共有四个顺序不能乱写，不然会不起作用，其中a:hover选择器特别重要，主要设置鼠标悬停在链接上的情况。
属性选择器
<!DOCTYPE html>
<html lang="en">
<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>属性选择器</title>
<style>
/* 属性选择器[]
*/
/* p[class=text] {
color: red;
} */
p[class*=e] {
color: red;
}
</style>
</head>
<body>
<p><a href="#"></a></p>
<p class="taet">胜下嗣，则。</p>
<p class="text">你和那护韩。</p>
<p id="second">你和那护韩。</p>
<p class="third">你和那护韩。</p>
</body>
</html>属性选择器主要的格式就在如上的代码中，了解一下即可，现在不常用。
复合选择器
<!DOCTYPE html>
<html lang="en">
<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>复合选择器</title>
<!-- 复合选择器：多个选择器组合来选中一个元素
交集：选择器选中了相同的元素，=》重点优先级
并集：选择器选中的是不同标签，不需要比较优先级，多个用,隔开 -->
<style>
/* 行内样式>id>class>标签 */
/* id: 1
class:1 */
.first #aFirst {
color: brown;
font-size: 30px !important;
}
/* id：1
class: 1
标签选择器：1 */
ul>#liFirst .aFrist {
color: aqua;
}
ul>li:nth-of-type(2) #aSecond,
ul>#liFirst #aFirst {
color: pink;
}
/*
0 0 0 0=》*、继承、兄弟选择器等
1 0 0 0=》代表行内样式
0 1 0 0 =》有多少个id选择器
0 0 1 0 =》有多少个class选择器
0 0 0 1 =》有多少个标签选择器
1 0 0 0 0 =》 !important */
</style>
</head>
<body>
<ul>
<li class="first" id="liFirst">
<!-- <p><a href="#" id="aFirst" class="aFrist" style="color: blue;">lorem1</a></p> -->
<p><a href="#" id="aFirst" class="aFrist">lorem1</a></p>
</li>
<li>
<p><a href="#" id="aSecond">lorem2</a></p>
</li>
<li>
<p><a href="#">lorem3</a></p>
</li>
<li>
<p><a href="#">lorem4</a></p>
</li>
</ul>
</body>
</html>复合选择器要涉及到权重的问题，其中继承和通配符选择器可记为0000，标签选择器为0001，类选择器为0010，id选择器为0100，行内样式可记为1000，！improtant为无穷大，涉及复合选择器我们要学会把数值相加，但是记住没有进位的情况，大的权值会执行，但是这只会覆盖相同属性值。
字体设置
<!DOCTYPE html>
<html lang="en">
<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>字体样式</title>
<!--
color:设置字体颜色
font-size：设置字体大小， 单位px、
em、rem....vh
px:像素，常用单位，浏览器默认的字体大小16px
em:当前元素的字体大小
rem:是指html的字体大小,移动端常用
vh:移动端的时候使用
font-weight:设置字体大小
属性值：100~900 整百数
lighter=100代表极细
normal=400代表正常
bold=700代表加粗
100~300一般都是代表极细
400~600一般代表正常
700~900一般代表加粗
font-family:设置文字字体，用户电脑上有该字体，才会有效，
所以一般在后面都要添加一个网页字体五大类中的一种
font-style：设置字体样式
可选值：
normal（默认值，正常显示）
italic(文字斜体显示)
oblique（文字倾斜显示）
一般浏览器不会对斜体和倾斜做区分=》一般使用italic
-->
<style>
/* 添加自己创建的字体样式，用户会自动加载这个安装包 */
@font-face {
font-family: "写你创建的字体名";
/* 用src来引进你穿件的字体安装包 */
src: url();
}
p {
font-size: 1rem;
/* color: brown; */
/* #代表十六进制0~f
00：代表红色
00：代表绿色
00：代表蓝色 */
/* #000000=>代表黑色
#fff=>代表白色 */
/* color: #ff0000; */
/* rgb(red,green,blue)=>取值是0~255
rgba(red,green,blue,alpha)
alpha:设置元素不透明度 取值0~1,0代表全透明，1代表不透明 */
color: #00f;
color: rgb(0, 0, 0);
color: rgb(255, 0, 0);
/* color: rgba(0, 0, 255,0); */
font-weight: 100;
font-weight: lighter;
/* */
font-family: serif;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
span {
font-weight: 400;
font-weight: normal;
/* 设置字体倾斜一般使用是italic */
font-style: italic;
font-style: oblique;
/* font-family: "创建的字体名"; */
}
a {
font-weight: 700;
font-weight: bold;
/* 设置正常字体 */
font-style: normal;
}
</style>
</head>
<body>
<p>丑护畴哥知。</p>
<span>以老之彷。</span>
<a href="#">面决玉人。</a>
</body>
</html>字体设置如上代码所示。
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
