选择器续
-
子孙后代选择器: 通过元素和元素之间的关系匹配元素
-
格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包括后代)
-
子元素选择器:通过元素和元素之间的关系匹配元素
-
格式: body>div>div>p{样式代码}匹配body里面的div里面的div里面的p子元素(不包括后代)
-
伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态
-
格式: a:link/visited/hover/active{样式代码}
通过内部样式实现以下效果
1. 关羽绿色
2. 张飞和苹果黄色
3. 文本框和所有水果背景红色
4. p2字体粉色
5. p2和p3背景黄色
6. 腾讯官网未访问绿色,访问过红色
悬停黄色,点击粉色
颜色赋值
-
三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
-
五种赋值方式:
-
颜色单词赋值: red/green/blue/yellow/pink....
-
6位16进制: #ff 00 00
-
3位16进制: #f00
-
3位10进制: rgb(255,0,0)
-
4位10进制: rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
-
背景图片
-
background-image:url("路径") 设置背景图片
-
background-size:100px 200px; 设置背景图片尺寸
-
background-repeat: no-repeat; 禁止重复
-
background-position:200px 100px; 设置背景图片位置
-
background-position:50% 100%; 设置背景图片位置
文本和字体相关样式
-
text-align:left/right/center; 水平对齐方式
-
text-decoration:overline/underline/line-through/none; 文本修饰
-
line-height:20px; 设置行高
-
text-shadow:颜色 x偏移值 y偏移值 模糊度; 设置阴影
-
font-size:20px; 字体大小
-
font-weight:bold加粗/normal去掉加粗;
-
font-style:italic; 斜体
-
font-family:xxx,xxx,xxx; 设置字体
-
font: 20px xxx,xxx,xxx; 字体大小+字体设置
文本和字体相关练习
1. 刘德华 宽度100 高度30 绿色背景红色字体
横向和纵向居中
2. 苹果和香蕉 字体大小25px 斜体
3. 冰箱去掉加粗 蓝色阴影
方向是左下 浓度3
4. 洗衣机添加下划线
5. 百度去掉下划线字体加粗
字体大小20px
元素的显示方式display
-
block: 块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div
-
inline: 行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b加粗,i斜体,u下划线,s删除线,a超链接等
-
inline-block:行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img
-
none: 隐藏元素
-
行内元素不能修宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素
盒子模型
-
盒子模型= content内容+margin外边距+padding内边距+border边框
-
作用: 控制元素的显示效果
-
content内容: 控制元素的显示大小
-
margin外边距: 控制元素的显示位置
-
padding内边距: 控制元素内容的位置
-
border边框: 控制元素的边框效果
-
盒子模型之Content内容
-
通过width和height设置元素的内容大小
-
两种赋值方式
-
像素
-
上级元素的百分比
-
-
行内元素不能修改宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素
盒子模型之Margin外边距
-
作用: 控制元素的显示位置
-
赋值方式:
-
margin-left/right/top/bottom:10px; 单独某一个方向赋值
-
margin:20px; 四个方向赋值
-
margin:10px 20px; 上下和左右赋值
-
margin:10px 20px 30px 40px; 上右下左顺时针赋值
-
-
行内元素上下外边距无效
-
上下相邻彼此添加外边距 取最大值, 左右相邻 两者相加
-
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden 解决
-
部分标签自带外边距,比如: h1-h6内容标题, p段落标签, 列表标签,body
盒子模型之border边框
-
作用: 控制元素边框的效果
-
赋值方式:
-
border:粗细 样式 颜色; 四个方向添加边框
-
border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框
-
-
border-radius:10px; 设置圆角 值越大越圆, 超过宽高的一半时为正圆
盒子模型之padding内边距
-
作用: 控制元素内容的位置
-
赋值方式: 和外边距类似
-
padding-left/right/top/bottom:10px; 单独某个方向添加
-
padding:10px; 四个方向添加
-
padding:10px 20px; 上下和左右
-
padding:10px 20p 30px 40px; 上右下左顺时针添加
-
-
给元素添加内边距会影响元素的宽高,box-sizing: border-box;给元素添加此样式后边框和内边距则不再影响宽高
-
列表标签自带内边距
CSS的三大特性
-
继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色
-
层叠性: 多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效
-
优先级: 指选择器的优先级, 作用范围越小优先级越高
!important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)
1.选择器（续）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
font-family: cursive;
}
#d1{
color: red;
}
div{
color: green !important;
}
p{color: blue;}
</style>
</head>
<body>
<div id="d1">
<p>这是p标签</p>
<span>这是span</span>
<a href="">超链接</a>
</div>
</body>
</html>
2.颜色与背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
color: #00ff00;
color: #00f;
color: rgb(255,255,0);
color: rgba(255,0,0,0.2);
}
#d1{
width: 200px;
height: 200px;
background-color: purple;
/*设置显示的背景图片*/
background-image: url("../imgs/a.jpg");
/*设置背景图片的尺寸: 宽 高*/
background-size: 100px 100px;
/*禁止重复*/
background-repeat: no-repeat;
/*控制位置:横向x 纵向y 通过像素偏移值*/
background-position: 20px 50px;
/*控制位置:横向x 纵向y 通过百分比*/
background-position: 80% 80%;
}
#d2{
width: 611px;
height: 376px;
background-color: #e8e8e8;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
background-repeat: no-repeat;
background-size: 318px 319px;
background-position: 90% 80%;
}
</style>
</head>
<body>
<div id="d2"></div>
<div id="d1">背景测试</div>
<h1>颜色测试</h1>
</body>
</html>
3.文本与字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 40px;
border: 1px solid red;
/*文本水平对齐方式*/
text-align: center;
/*文本修饰 overline上划线,
underline下划线,line-through删除线,none去掉文本修饰*/
text-decoration: line-through;
/*行高,控制行间距,如果只有单行文本可以实现垂直居中*/
line-height: 40px;
/*文本阴影:颜色 x偏移值 y偏移值 模糊度(值越小越清晰)*/
text-shadow: green 5px 5px 5px;
/*字体大小*/
font-size: 20px;
/*加粗*/
font-weight: bold;
/*设置字体*/
font: 30px cursive;
}
a{text-decoration: none}
h1{
font-weight: normal;/*去掉加粗*/
/*斜体*/
font-style: italic;
/*设置字体*/
font-family: cursive;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>
4.显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*块级元素 独占一行 可以修改宽高*/
border: 1px solid red;
width: 100px;
height: 100px;
}
span{
/*行内元素 共占一行 不能修改宽高*/
border: 1px solid blue;
width: 100px;
height: 100px;
}
img{
/*行内块元素 共占一行 可以修改宽高*/
width: 100px;
height: 100px;
}
a{
background-color: #0aa1ed;
width: 132px;
height: 40px;
/*如果行内元素需要修改宽高, 必须将显示方式改成block或inline-block*/
display: block;
text-align: center;
line-height: 40px;
color: white;
text-decoration: none;
font-size: 20px;
border-radius: 3px;/*设置圆角,值越大越圆*/
}
</style>
</head>
<body>
<a href="">查看详情</a>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
5.外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
border:1px solid red;
/*单独某个方向添加外边距*/
/*margin-right: 100px;*/
/*margin-top: 50px;*/
/*四个方向添加外边距*/
margin: 50px;
/*上下和左右添加外边距*/
margin: 100px 50px;
/*上右下左 顺时针赋值*/
margin: 10px 20px 30px 40px;
}
#d2{
width: 100px;
height: 100px;
border: 1px solid red;
/*上下相邻两个元素彼此添加外边距, 取最大值*/
margin-top: 50px;
}
#s1{
/*行内元素上下外边距 无效*/
margin-right: 50px;
}
#s2{
/*左右相邻彼此添加外边距 两者相加*/
margin-left: 30px;
}
#big{
width: 200px;
height: 200px;
background-color: green;
/*解决粘连问题*/
overflow: hidden;
}
#big>div{
width: 50px;
height: 50px;
background-color: blue;
margin-left: 50px;
/*当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,
给上级元素添加overflow:hidden解决*/
margin-top: 50px;
}
body{
margin: 0;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<p>这是p</p>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<div id="big">
<div></div>
</div>
<span id="s1">span1</span><span id="s2">span2</span>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
6.边框与内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 400px;
height: 200px;
border: 20px solid red;
/*设置圆角,值越大越圆, 超过宽高一半为正圆(前提是正方形)*/
border-radius: 200px;
}
#d2{
width: 50px;
height: 50px;
border:1px solid red;
/*给元素添加内边距会影响元素的显示宽高*/
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<div id="d2">内边距</div>
<!--div#d1 +tab div.c1 +tab-->
<div id="d1">边框测试</div>
</body>
</html>
7.CSS三大特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
font-family: cursive;
}
#d1{
color: red;
}
div{
color: green !important;
}
p{color: blue;}
</style>
</head>
<body>
<div id="d1">
<p>这是p标签</p>
<span>这是span</span>
<a href="">超链接</a>
</div>
</body>
</html>
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
