选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
*{margin:0;padding:0;}
div{/* 标签名选择 直接写标签名或找到所有的名字符合的标签 */
border:1px solid red;
/* background-color:pink; */
}
.goudan{
background-color:pink;
}
#dachui{
margin:30px 0;
}
/* 选择器
1. 标签名选择器
直接找到名字相同的所有标签
语法: 标签名{}
2. 类名选择器
通过类名找到对应的标签
语法： .类名{}
3. ID名选择器
通过id名字字找到对应的标签
语法：#id名{}
4. 通配符选择器
无论什么元素全部找到
语法：*{}
*/
/* 命名规范
1. 见名知意
2. 使用英文单词，不要使用中文拼音，不能用中文
3. 命名中可以有数字 - _ 但是不能以其开头
4. 可以使用驼峰命名法，从第二个单词开始，单词首字母大写
menuLeftTopBottom
*/
</style>
</head>
<body>
<div class="daohang_1">我是div</div>
<div class="daohang-2">我是div</div>
<div class="daohang3">我是div</div>
<div id="caiDan">
<div class="menuLeft">
<div>111111</div>
</div>
</div>
</body>
</html>
选择器的特性
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
div{
}
.box{/* 相同的类名可以重复出现 同一个标签可以拥有多个类名中间用空格隔开 */
border:1px solid red;
}
.btn{
border-color:green;
}
#wrap{/* 一个id名界面只能出现一次 不能出现第二次 等同身份证号码 */
}
</style>
</head>
<body>
<div class="box btn" id="wrap">
我是box1
</div>
<div id="wrap1" class="box">
我是box2
</div>
</body>
</html>
选择器的结构关系
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
/* 包含选择器 */
.box{/* 找到类名叫box的元素 */
/* width:100px;
height:100px;
border:1px solid red; */
}
.box1 .box{/* 找到类名叫box1的所有后代元素中，类名叫 box的元素 */
width:100px;
height:50px;
border:1px solid red;
}
.box1 .box .box{
border-color:yellow;
}
/* 并且选择 */
/* 同一个标签需要满足的条件 */
.box1.box{/* 找到类名叫box1并且类名也要叫box的元素 */
background-color:pink;
}
.box1#box{
}
div.box{
}
div a{
font-size:14px;
color:red;
}
p b{
font-size:14px;
color:red;
}
span{
font-size:14px;
color:red;
}
div a,p b,span,.box{/* 群组选择器 */
font-size:14px;
color:red;
}
.link{
font-size:14px;
color:red;
}
/* 群组选择器 */
/*
1. 后代选择器 .box1 .box .box 包含的关系
2. 并且的关系的选择器 div.box
3. 群组选择器 div a,p b,span
*/
</style>
</head>
<body>
<div class="box">
box
</div>
<div class="box1 box">box1
<div class="box">box2
<div class="box">box3</div>
<div>box4</div>
</div>
</div>
<hr style="margin:50px 0;" />
<a href="" class="link">我是a标签</a>
<span class="link">我是span</span>
<b class="link">我是b标签</b>
</body>
</html>选择器的优先级
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;}
#box{
border-color:blue;
}
.box{
background-color:pink;
border-color:green;
}
div{
width:100px;
height:100px !important;
margin:0 auto !important;
border:10px solid red !important;
/* border-width:10px;
border-style:solid; */
/* border-color:red !important; */
}
p{
border-color:green;
}
p{
width:50px;
height:50px;
border:10px solid deeppink;
}
*{border-color:black;}
/* 当通过不同的选择器给同一个标签添加相同的样式的时候 哪个选择器的样式生效
1. 行内样式 > ID > class > 标签名 > *通配符
2. 类别相同时数量越多优先级越高
3. 加载顺序越靠后然后优先级越高
4. 样式书写方法
行内大于 > 头部样式 > 外部样式
5. !important 强制提示优先级至最高
*/
</style>
</head>
<body>
<div id="box" class="box" style="border-color:black;">
<div class="box1">
<p>我是p标签</p>
</div>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>同学们大家好！</title>
<meta name="Keywords" content="201710级基础班,01-模板" />
<meta name="Description" content="" />
<style type="text/css">
div{
width:300px;
height:300px;
margin:20px auto;
display:inline-block;
}
.box{
background-color:pink;/* 背景颜色 */
background-color:#00ffff;
background-color:rgba(255,0,0,0.1);/* red green blue 0~255 透明度 0~1 */
}
.box1{
background-color:pink;
background-image:url("01.jpg");/* 背景图片 url 图片路径 */
}
.box2{
background-size:100px;
/* 背景图片的大小
两个值：宽度 高度
一个值：宽度 高度自适应
cover ： 等比缩放至铺满整个元素 占满
contain：等比缩放到容器刚好能够放下完整的图片
% : 基于元素百分比
*/
}
.box3{
width:500px;
height:200px;
background-repeat:no-repeat;
background-size:contain;
/* 背景的重复方式
no-repeat 不重复
repeat-x x轴方向重复
repeat-y y轴方向重复
repeat xy轴同时重复（默认值）
*/
}
.box4{
width:1000px;
height:200px;
background-repeat:no-repeat;
background-position:50%;
/* 背景的位置
两个值：x y 距离元素左边的距离 和距离元素上边的距离
一个值：x 居中 设置x轴的值 y轴居中
center：居中
left right top bottom center
*/
}
.box5{
margin-left:0;
display:block;
background-size:400px 400px;
background-repeat:no-repeat;
background-attachment:fixed;
/* 是否把背景图片固定在浏览器左上角的位置
fixed 固定
scroll 默认值
*/
background:red url("") no-repeat center top/100px 100% fixed;
/* color image repeat position/size attachment */
background:url("") center/cover;
}
body{
height:10000px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
<div class="box1">
box1
</div>
<!-- <div class="box1 box2">
box2
</div>
<div class="box1 box2 box3">
box3
</div>
<div class="box1 box2 box4">
box4
</div> -->
<div class="box1 box2 box5">
box5
</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
div{
margin:30px;
border:1px solid red;
}
body{
/* font-size:30px; */
}
.text1{
color:rgba(255,200,0,1);/* 字体颜色 */
}
.text2{
/* font-size:100px; */
/*
固定的像素值
百分比 ： 基于父级的百分比
*/
font-size:100%;
/* font-style:oblique; */
}
.text3{
font-style:italic;
/*
normal 默认
italic 斜体风格
oblique 斜体字体
*/
}
.text4{
font-family:"Microsoft yahei","SimSun","";
}
.text5{
font-weight:500;
/*
bold 普通加粗
bolder 更粗的字体
normal 默认字体
具体的数值 100~900 取值需要是整百 没有单位
*/
}
.text6{
font-variant:small-caps;
/*
normal 默认值
small-caps 小型大写字母 把所有的小写字母转换成大写 但是字体大小偏小
*/
}
.text7{
font-size:20px;
line-height:1.5;
/*
1. 单行文字占据的高度（和字体大小没有关系）
2. 行高可以撑开块级特性元素的高度
固定的像素值
倍数值 字体大小的倍数
*/
}
.text8{
color:#00ff66;
/* font:bold italic small-caps 14px/1.5 "Microsoft yahei"; */
font:bold 14px/1.5 "Microsoft yahei";
/* 复合样式的写法 字体类型为必选的值 */
}
</style>
</head>
<body>
字体颜色
<div class="text1">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
字体大小
<div class="text2">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
字符的风格
<div class="text3">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
字符的类型
<div class="text4">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
加粗字体
<div class="text5">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
小型大写字母
<div class="text6">
XML BewHy hello world swift Re0
</div>
字体行高
<div class="text7">
XML BewHy hello world swift Re0<br />
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
复合样式
<div class="text8">
XML BewHy hello world swift Re0<br />
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
div{
margin:30px;
border:1px solid red;
}
body{
/* font-size:30px; */
}
.text1{
text-align:center;
/*
right 居右显示
left 居左显示
center 居中显示
*/
}
.text2{
text-decoration:overline;
/*
none 无修饰
underline 下划线
line-through 删除线
overline 上划线
*/
}
.text3{
text-indent:2em;
/*
px 固定的像素值
em 字体个数
*/
}
.text4{
width:400px;
white-space:nowrap;/* 强制文本不换行 */
overflow:hidden;/* 内容溢出处理 */
text-overflow:ellipsis;/* 文本溢出处理 */
/*
clip 超出裁剪
ellipsis 超出出现省略号
*/
}
.text5{
text-transform:lowercase;
/*
none 默认
capitalize 单词首字母大写
uppercase 全部单词大写
lowercase 全部小写
*/
}
.text6{
letter-spacing:10px;
/*
单个字符之间的间隔距离
*/
}
.text7{
word-spacing:30px;
/*
词与词之间的距离
*/
}
.text8{
color:#00ff66;
/* font:bold italic small-caps 14px/1.5 "Microsoft yahei"; */
font:bold 14px/1.5 "Microsoft yahei";
/* 复合样式的写法 字体类型为必选的值 */
}
</style>
</head>
<body>
文本水平对齐方式
<div class="text1">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
文本修饰
<div class="text2">
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
文本首行缩进
<div class="text3">
饶红波 大白 XML数据库 隔壁老刘 梦仙<br />
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
文本溢出处理
<div class="text4">
饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙
饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙
饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
文本字母处理
<div class="text5">
XML BewHy hello world swift Re0
</div>
字间距
<div class="text6">
XML BewHy hello world swift Re0饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
词间距
<div class="text7">
XML BewHyhelloworldswiftRe0 饶红波-大白XML数据库隔壁老刘梦仙
</div>
复合样式
<div class="text8">
XML BewHy hello world swift Re0<br />
饶红波 大白 XML数据库 隔壁老刘 梦仙
</div>
</body>
</html>
文本换行处理方式
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
div{
width:500px;
height:300px;
margin:30px auto;
border:1px solid red;
}
body{
/* font-size:30px; */
}
/* 文本换行处理方式
nowrap 不换行 只有文本遇到br标签才会强制换行
normal 默认
pre 文本的格式保持和源码一致 文本不会自动换行
pre-line 合并空格换行 文本自动换行
pre-wrap 文本的格式和源码一致 但是文本会自动换行
*/
.text1{
white-space:normal;
}
.text2{
white-space:pre;
}
.text3{
white-space:pre-line;
}
.text4{
white-space:pre-wrap;
}
.text5{
word-break:keep-all;
/*
normal 默认值
break-all 允许在字母单词 在单词内换行 汉字全部换行
keep-all 不允许所有单词换行包括汉字
*/
}
.text6{
word-break:keep-all;
/*
mormal 默认值
break-all 允许在单词内换行
*/
}
.text7{
word-spacing:30px;
/*
词与词之间的距离
*/
}
.text8{
color:#00ff66;
/* font:bold italic small-caps 14px/1.5 "Microsoft yahei"; */
font:bold 14px/1.5 "Microsoft yahei";
/* 复合样式的写法 字体类型为必选的值 */
}
</style>
</head>
<body>
nowrap
<div class="text1">
饶红波 大白 XML数据库
隔壁老刘梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘
梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙
</div>
pre
<div class="text2">
饶红波 大白 XML数据库
隔壁老刘梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙饶<br />红波 大白 XML数据库
隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘
梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙
</div>
pre-line
<div class="text3">
饶红波 大白 XML数据库
隔壁老刘梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙饶<br />红波 大白 XML数据库
隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘
梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙
</div>
pre-wrap
<div class="text4">
饶红波 大白 XML数据库
隔壁老刘梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙饶<br />红波 大白 XML数据库
隔壁老刘 梦仙饶红波 大白 XML数据库 隔壁老刘
梦仙饶红波 大白 XML数据库 隔壁老刘 梦仙饶红波 大白 XML数据库
隔壁老刘 梦仙
</div>
单词换行方式
<div class="text5">
饶红波大白ML-数据库隔壁老刘-梦仙饶红波_大白XML_数据库隔壁老刘梦仙饶红波大白 XML数据库隔壁老刘梦仙饶红波大白XML数据库隔壁老刘<br>
ahdhflajdhf lkasdjfkl ahfkosahdj flkasjfkl jadklfja skdldfjas dklfjasdkl fjaahdhfla jdhflkasdjfklah fkosahdjflkasjfk ljadklfjaskdldfja sdklfjasdklfja
</div>
转义
<div class="text6">
>div></div>Ç
</div>
</body>
</html>
高级选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
body{
padding-bottom:500px;
}
#box{
width:300px;
height:300px;
margin:0 auto;
border:1px solid red;
}
#box .child1{
width:50px;
height:50px;
border:3px solid black;
}
#box .child{
width:100px;
height:100px;
margin-bottom:5px;
border:3px solid blue;
}
.box div{
background-color:pink;
}
.box > div{
background-color:deeppink;
}
.list{
width:500px;
border:3px solid black;
margin:30px auto;
}
.list li{
width:100px;
height:100px;
border:1px solid red;
margin:10px auto;
}
.list .itme1 + p{
background-color:pink;
}
[color]{
color:blue;
}
[dachui]{
color:red;
}
[dachui = goudan]{
color:green;
}
[class = font]{
color:green;
}
/*[class ~= font]{
color:yellow;
}
*/
/*
#box > div
子级 选择器，只会选择直接的下一级的子级元素，而不是所有后代
.list .itme1 + .test
毗邻选择器，只会选择相邻的，下一个兄弟元素
[color]
属性选择器，选择拥有该属性的元素
[class=font]
属性=属性值选择，属性与属性值完全一致
[class~=font]
属性包含属性值选择，属性一致与属性值包含选择器的字符
*/
</style>
</head>
<body>
<div id="box" class="box">
<div class="child">
<div class="child1"></div>
</div>
<div class="child">
<div class="child1"></div>
</div>
</div>
<hr />
<ul class="list">
<li class="test">2</li>
<li class="itme1">1
<p class="test">5</p>
</li>
<li>3</li>
<li class="test">4</li>
</ul>
<hr />
<a href="" dachui="goudan">href--a标签</a>
<font color="red1" class="font text" id="font">color-font标签</font>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
[class~=font]{
color:red;
}
[id=font]{
color:blue;
}
[class|=font1]{
color:pink;
}
/*
[class~=font]
属性包含属性值选择，属性一致与属性值包含选择器的字符，属性值需要用空格隔开
[class|=font]
属性值开头择器，选择属性值为 选择器字符- 开头的元素，或者值完全匹配的元素
*/
</style>
</head>
<body>
<!-- <a href="" dachui="goudan">href--a标签</a> -->
<font color="" class="text font test" id="font">color-font标签</font>
<hr />
<font class="font1-test">color-font标签</font>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>hello world!</title>
<meta name="Keywords" content="201710级基础班,01-模板" />
<meta name="Description" content="" />
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
[class]{
width:100px;
height:100px;
border:1px solid red;
margin:0 auto;
}
a{
color:blue;
}
a:link{
color:red;
}
a:hover{
background-color:rgba(0,0,0,0.5);
}
a:active{
color:pink;
}
a:visited{
color:#cc00ff;
}
.box:hover{
/* background-color:red; */
}
p{
width:50px;
height:50px;
background-color:blue;
display:none;/* 让一个元素在界面里完全消失 */
}
.box:hover p{
display:block;
}
.box:active{
width:200px;
}
/* 伪类选择器
选择满足某些条件的元素
:link 未被点击的时候
:active 按下但是鼠标没有释放的时候
:hover 鼠标悬停的时候
不兼容低版本的IE
:visited 点击过后的状态
*/
/*
浏览器判断一个a标签有没有被点击过是通过 href的值来判断，所以值相同的a标签点击状态也相同
*/
/* 伪类元素
*/
.text::before{
content:"章征武";/* 伪类元素特性的属性 必须 伪类元素两个冒号 */
border:1px solid blue;
}
.text::after{
content:"大白";
border:1px solid blue;
display:block;
width:30px;
height:30px;
}
</style>
</head>
<body>
<a href="######">我是a标签1</a>
<a href="#######">我是a标签2</a>
<a href="########">我是a标签2</a>
<div class="box">
<p>111</p>
</div>
<hr />
伪类元素<br />
<div class="text">
好帅<after>大白</after>
</div>
<span ></span>
</body>
</html>
css3选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.box{
width:200px;
height:200px;
border:1px solid red;
margin:30px auto;
}
/* .box:first-child{
width:200px;
height:200px;
border:1px solid red;
margin:30px auto;
} */
.list{
border:1px solid red;
}
div:last-child{
color:red;
}
/*
:first-child 选择 第一个 顺序对应 的子级元素
:last-child 选择 最后一个 顺序对应 的子级元素
*/
</style>
</head>
<body>
<div class="list"> 1
<div>div1</div> 1
<p>p1<p/> 2
<div>
div2
<div>div5</div>
</div> 3
</div>
<div class="list"> 2
<p>p2</p> 1
<div>div3</div> 2
<div>div4</div> 3
<p>p3</p> 4
</div>
<hr />
<div class="box">
11111
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.list{
border:1px solid red;
}
div:first-of-type{
color:red;
}
/*
:first-of-type 选择 第一个 类别对应 的子级元素
:last-of-type 选择 最后一个 类别对应 的子级元素
*/
</style>
</head>
<body>
<div class="list"> d1
<div>div1</div> d1
<p>p1<p/> p1
<div>div2</div> d2
</div>
<div class="list"> d2
<p>p2</p> p1
<div>div3</div> d1
<div>div4</div> d2
<p>p3</p> p2
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
.list{
border:1px solid red;
}
.list p:nth-last-of-type(2){
color:red;
}
/*
last-child first-of-type
:nth-child(n) 选择 正数第n个 顺序对应 的子级元素
:nth-of-type(n) 选择 正数第n个 类别对应 的子级元素
:nth-last-child(n) 选择 倒数第n个 顺序对应 的子级元素
:nth-last-of-type(2) 选择 倒数第n个 类别对应 的子级元素
*/
</style>
</head>
<body>
<div class="list"> d1
<div>div1</div> d1
<p>p1</p> p1
<div>div2</div> d2
</div>
<div class="list"> d2
<p>p2</p> p1
<div>div3</div> d1
<div>div4</div> d2
<p>p3</p> p2
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
li{list-style:none;display:block;}
img{vertical-align:top;}
ul{
width:800px;
background-color:pink;
margin:30px auto;
}
ul li{
height:30px;
border:2px solid black;
margin-bottom:10px;
}
.list2 li:nth-child(odd){/* 奇数 1 3 5 7 9 ... */
background-color:green;
}
.list2 li:nth-child(even){/* 偶数 2 4 6 8 10 ... */
background-color:#ff00cc;
}
/* li:nth-child(3){
background-color:green;
}
li:nth-child(4){
background-color:#ff00cc;
}
li:nth-child(5){
background-color:green;
}
li:nth-child(6){
background-color:#ff00cc;
}
li:nth-child(7){
background-color:green;
} */
.list1 li:nth-child(2n-1){
/*
自然数 0 1 2 3 4 5 6 ...
可以进行 + - 计算 n+1
进行乘法运算的时候 数值写在前面 2n ..
*/
background-color:deeppink;
}
</style>
</head>
<body>
<ul class="list1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="list2">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
