把基本选择器 通过特殊符号串在一起,具有特定意义。
分组选择器
/* 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=04&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55ca7b0308f59c.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=04&di=7c8f86efce31377e1afec6033faa2815&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Ffeed%2Fpic%2Fitem%2F1e30e924b899a9019a9d55ca7b0308f59c.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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/47892.html