把基本选择器 通过特殊符号串在一起,具有特定意义。
分组选择器
/*
div{
background:green;
color: blue;
}
p{
background: green;
font-size: 50px;
color: blue;
}*/
/*分组选择器 多个标签选择器通过 ,来隔开
div,p,ul 可以简化代码
*/
div,p{
background:green;
color: blue;
}
p{
font-size: 50px;
}
嵌套选择器
/*嵌套选择器
多个标签选择器用空格隔开
div p 表示:嵌套在div中的p标签(包括间接嵌套)
*/
div p{
background-color: brown;
color:rebeccapurple;
font-size:50px;
}
子选择器
/*子选择器
div>p 直接父标签为div的p
*/
div>p{
background-color: brown;
color:rebeccapurple;
font-size:50px;
}
相邻同级选择器
/*
div+p 表示和div同一级别的p
*/
div+p{
background-color: brown;
color:rebeccapurple;
font-size:50px;
}
属性选择器
p[title]{/*对应有title属性的p*/
background:green;
color:red;
font-size:50px;
}
p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/
background:blue;
}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/
background: gold;
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/
background: darkmagenta;
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
background: rgb(13,45,42)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
background:green;
}
</style>
</head>
<body>
<div><p title="qiubazi">操逼操到天亮</p></div>
<p title="qiuqiu2">逍遥法外无常</p>
<p title="ccc qiuqiu ccc">起床看不见光</p>
<p title="qiuqiu ccc">独坐床上彷徨</p>
<p title="1 qiuqiu">余生去向何方</p>
<p>我心暗自悲伤</p>
<p>美女令人心慌</p>
<p>裤子太窄勒档</p>
</body>
</html>
伪元素选择器
伪元素:我们自己没哟写就TM存在的元素
真元素:我们自己写的元素
每一个标签都会被偷偷在标签中加上两个伪元素:(你丫看不见)
开始:before
结束:after
块元素的伪标签:
第一个字母:first-letter
第一行:first-line
p[title]{/*对应有title属性的p*/
background:green;
color:red;
font-size:50px;
}
p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/
background:blue;
}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/
background: gold;
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/
background: darkmagenta;
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
background: rgb(13,45,42)
}
p::before{
content:"你的黄湿已被修改 ";/*相当于<before>你的黄湿已被修改</before>*/
}
p::after{
content:" 好湿好湿";/*p文字的属性伪标签会继承*/
}
p::first-letter{
color:red;
font-size: 100px;
}
伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
background:green;
}
</style>
</head>
<body>
<div><p title="qiubazi">操逼操到天亮</p></div>
<p title="qiuqiu2">逍遥法外无常</p>
<p title="ccc qiuqiu ccc">起床看不见光</p>
<p title="qiuqiu ccc">独坐床上彷徨</p>
<p title="1 qiuqiu">余生去向何方</p>
<p><!--<before> -->
我心暗自悲伤
<!--<after>-->
</p>
<p>美女令人心慌</p>
<p>裤子太窄勒档</p>
</body>
</html>
CSS背景使用实例
p[title]{/*对应有title属性的p*/
color:red;
font-size:50px;
}
p[title=qiuqiu2]{/*对应title属性为qiuqiu2的p*/
}
p[title~=qiuqiu]{/*对应title属性的值中包含有qiuqiu的*/
}
p[title^=qiuqiu]{/*对应title属性的值是以qiuqiu开始的*/
}
p[title$=qiuqiu]{/*对应title属性的值是以qiuqiu结尾的*/
}
p::before{
content:"~";/*相当于<before>你的黄湿已被修改</before>*/
}
p::after{
content:"~";/*p文字的属性伪标签会继承*/
}
p::first-letter{
color:red;
font-size: 100px;
}
body{
/*
background-color: darkgoldenrod;
background-image:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551198678904&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55c411950a7b0308f59c.jpg');
/* background-repeat:repeat-x;只沿着x轴平铺*/
/* background-repeat:no-repeat;/*不平铺*/
/*background-position:100px 100px;/*(x,y)坐标,页面左上角为原点*/
/*background-position:50% 50%;/*位于x轴50%的地方,y轴50%的地方*/
/*
x:left center right
y:top center bottom
*//*
background-position: center right;
background-attachment: fixed;/*使页面滚动的时候,图片固定在上面*/
/*background:color image repeat attachment position*/
background:darkgoldenrod url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551198678904&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55c411950a7b0308f59c.jpg") no-repeat fixed center right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
}
</style>
</head>
<body>
<div><p title="qiubazi">操逼操到天亮</p></div>
<p title="qiuqiu2">逍遥法外无常</p>
<p title="ccc qiuqiu ccc">起床看不见光</p>
<p title="qiuqiu ccc">独坐床上彷徨</p>
<p title="1 qiuqiu">余生去向何方</p>
<p><!--<before> -->
我心暗自悲伤
<!--<after>-->
</p>
<p>美女令人心慌</p>
<p>裤子太窄勒档</p>
</body>
</html>
CSS字体实例的多种变换
body{
font-family: "微软雅黑","Microsoft YaHei";/*如果系统里有第一个字体,就用第一个,如果么有就用第二个*/
font-size: 30px;/*字体的高度*/
font-weight:900;/*100~900 9个级别,字体粗体*/
/*normal lighter bold*/
font-style:normal;/*italic 斜体*/
简写:
font:style weight size(字号)/line-height(行高) font-family
至少要有 font:size(字号) font-family
}
CSS文本的实例
/*空格的距离:word-spacing:0px*/
/*direction:ltr;left to right*/
/*text-decoration:none 不划线
line-through 删除线
overline;上划线
underline; 下划线*/
/*
文字对齐方式:
text-align:
center居中对齐
left左对齐
right右对齐
justify 两端对齐
只要是块元素,就一定能设置宽高;
text-indent:设置缩进
英文大小写字母
text-transform:uppercase;全部大写
lowercase;全部小写
capitalize;首字母大写
*/
img{
width: 200px;
/*垂直对齐 top center bottom */
vertical-align: top;
float:left;/*使文字围绕图片*/
}
p{
text-decoration: line-through;/*删除线*/
text-align: left;
text-indent: 60px;
/*
width: 250px;1.设置容器宽度低于文字的宽度
white-space: nowrap;2.不包裹,即让文字撑出容器
overflow:hidden;3.将撑出部分隐藏
text-overflow:ellipsis;4.将隐藏文字替换成省略号*/
background: yellow;
text-transform: capitalize;
}
.txt1{
text-align:justify;
text-decoration: overline;/*上划线*/
text-transform: uppercase;
/*字符间距*/
/*letter-spacing: 0px;/*没有距离*/
/*word-spacing: 10px;
direction: rtl;/*表示文字右对齐*/
}
.txt2{
text-align:right;
text-decoration: underline;/*下划线*/
letter-spacing:-5px;
word-spacing: -10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
}
</style>
</head>
<body>
这是一段字
<br>
<p>hello world</p>
<p class="txt1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551279036211&di=0ef60c102ecdf0164e8944a80826cfc0&imgtype=0&src=http%3A%2F%2Fimg2.gomein.net.cn%2Fimage%2Fbbcimg%2Fproduction_image%2Fnimg%2F20150523%2F15%2F8006201393%2F116805426_800.jpg" alt="小米8">
hello world 看看我的字符间距密不密
</p>
<p class="txt2">hello world 我的字符间距为负哦</p>
</body>
</html>
与超链接相关的CSS设置
/*
a标签的伪类
初始状态
被访问的状态
鼠标移动上去的状态
鼠标点击时的状态
*/
a:link{
color:blue;
}
a:visited{
color:yellow;
}
a:hover{
color:red;
font-size: 30px;
}
a:active{
color:green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
}
</style>
</head>
<body>
<a href="#1">这是第一个链接</a>
<br>
<br>
<a href="#1">这是第二个链接</a>
</body>
</html>
ul{
list-style-type:none;
}
/*
ul:
none:不使用项目符号
disc:实心圆
circle:空心圆
square:实心方块
demical:阿拉伯数字
ol:
lower-alpha:小写英文字母
upper-alpha:大写英文字母
lower-roman:小写罗马数字
upper-roman:大写罗马数字
不需要记 最常用的是none
*/
li{
background-image: url("timg.jpg");
height: 50px;
background-repeat: no-repeat;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<link rel="stylesheet" href="2.css">
<style>
div{
}
</style>
</head>
<body>
<ul>
<li>第一章</li>
<li>第二章</li>
</ul>
</body>
</html>