第六十七篇 css样式与布局
目录html
1、高级选择器
1.后代选择器
1.用空格隔开。对于E F，表示全部属于E元素后代的F元素，有这个样式，空格表示后代，它描述的是祖先结构布局
2.须要注意的是：对于这两个标签不必定是连续紧挨着的，只要保持一个后代的关联便可，也就是说，选择的是后代，不必定是儿子字体
2.子代选择器
1.用>链接，对于E>F，表示全部属于E元素子代的F元素，有这个样式，>表示子代，它描述的是父子结构url
2.须要注意的是：子代选择器只能匹配直接父子关系，若是中间隔代，则不能匹配spa
3.兄弟选择器
**1.用+号链接，对于E + F，表示与E相邻的兄弟元素F，有这个样式，+表示相邻，它描述的是相邻的兄弟结构。须要注意的是：只能匹配第一个F标签code
2.用~号链接，对于E~F，表示与E相邻的兄弟元素F，有这个样式，~表示相邻，它描述的是相邻的兄弟结构。须要注意的是：标签的上下结构造成兄弟标签，兄弟选择器能够匹配直接兄弟关系或间接兄弟关系造成的层次，便可以匹配多个兄弟关系的选择器orm
4.群组选择器
用逗号隔开多个选择器，能够控制多个选择器htm
5.交叉选择器
1.紧挨着，没有任何链接符，交叉选择器本质上是对一个目标标签的多个名字（标签、类、id）的同时标识图片
2.标签名、class名、id名能够是对同一个目标标签的修饰，须要注意的是在一个页面中id只有一个，class属性能够有多个值utf-8
6.选择器的优先级
1.简单选择器存在优先级，优先级的前提就是不一样选择器同时控制同一标签的同一属性
2.复杂选择器的种类并不会影响优先级，它是经过同类型（简单选择器）的个数来肯定优先级
3.简单选择器的优先级起关键性做用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
2、伪类选择器
1.伪类中的nth-child与nth-of-type属性
1.用冒号(:)链接，对于E:F，表示E元素中的全部F元素，有这个样式
2.伪类选择器优先级与类相同
3.nth-child：在同一结构下都是相同选择器时使用。先肯定位置，再筛选选择器，也就是不按指定标签的个数匹配，而是不管哪一个标签都算在内
4.nth-of-type：在同一结构下不全是相同选择器时使用。先肯定选择器，再匹配位置，也就是只数指定标签的个数
2.属性选择器
1.[属性名]查找全部有该属性的标签
2.[属性名=属性值]查找全部该属性是指定属性值的标签
3.[属性名^=值]以该属性且为指定属性值开头的全部的标签
4.[属性名*=值]模糊查询，包含该属性值的全部标签
3、a标签的四大伪类
1.a标签的四大伪类
标签未被访问、标签已被访问、标签被悬浮、标签被激活
<!doctype html>
<html>
<head>
<style>
a:link {color: #FF0000} /* 未访问的连接 */
a:visited {color: #00FF00} /* 已访问的连接 */
a:hover {color: #FF00FF;
/* 鼠标样式：wait、row-resize、none、text、pointer、default */
cursor:pointer;} /* 鼠标移动到连接上 */
a:active {color: #0000FF;
cursor:wait;} /* 选定的连接 */
</style>
</head>
<body>
</body>
</html>
2.reset操做
在开发中每每用不到四种伪类，能够经过reset操做对a标签进行样式设置：清除系统默认样式
a {
color: black;
text-decoration: none;
}
3.普通标签的伪类运用
<!doctype html>
<html>
<head>
<style>
/*字体*/
.btn {
font: bold 20px/45px 'STSong';
text-align: center;
}
/*边界圆角*/
.btn {
border-radius: 5px;
}
/*不容许文本操做*/
body {
user-select: none;
}
/*伪类*/
.btn:hover {
cursor: pointer;
background-color: orangered;
}
.btn:active {
background-color: brown;
}
</style>
</head>
<body>
<div class="btn">按钮</div>
<!--
标签没有被访问过
标签被悬浮
标签被激活
标签已被访问过
-->
</body>
</html>
4、文本属性
1.文字大小：font-size
2.字体颜色：color
3.字族（字体）：font-family
4.字重（字体宽度）：font-weight
5.字体样式：font-style
6.文本划线(上划线、下划线、中划线...)：text-decoration
7.文本水平位置（居中、贴右...）：text-align
8.行高：line-height
9.首行缩进：text-indent
10.文字间距：letter-spacing
11.总体设置
5、边界圆角
border-radius
1.左上为第一个角，顺时针编号
2.不足找对角
3.用/划分时，横纵分离，先横后纵
4.能够填固定值（像素）或百分比
6、背景图片
.box {
background-image:url("img/图片.gif")
/*尽可能只设置宽，高等比缩放，不失真*/
background-size
/*平铺: repeat-x repeat-y repeat no-repeat*/
background-repeat
/*1.只设置x轴，y轴默认center*/
/*2.
x轴：left/center/right/具体像素/百分百，
y轴：top/center/bottom/具体像素/百分百
*/
background-position: center center;
}
1.显示比屏幕大的图片时，尽可能只设置宽，高会等比缩放
2.显示比屏幕小的图片时，经过平铺与位置（x轴或y轴）来进行处理
7、精灵图案例
精灵图就是操做大图在显示区域的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图案例</title>
<style>
/*精灵图就是操做大图在显示区域的位置*/
.box {
width: 500px;
height: 100px;
background-color: orangered;
border: solid;
}
.box {
background-image: url("img/bg.png");
background-position-y: -150px;
}
.box:hover {
cursor: pointer;
background-position-y: -250px;
}
</style>
<style>
.b1 {
width: 155px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
}
.b1:hover {
cursor: pointer;
background-position-y: -48px;
}
</style>
<style>
.b2 {
width: 157px;
height: 48px;
border: solid;
background-image: url("img/bg.png");
background-position: -155px 0;
}
.b2:hover {
cursor: pointer;
background-position: -155px -48px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
8、显示方式
1.display属性中有三种显示方式：block、inline、inline-block
2.block：支持设置宽和高，自带换行。基本上全部有宽和高、参与位置布局的都是block
3.inline：不支持设置宽和高，宽高只能由文本撑开，不带换行，一行显示不下会自动换行（保留数据的总体性）。用于存放文本
4.inline-block：支持设置宽和高，不带换行，一行显示不下会自动换行（以标签总体换行，标签左右须要有间距）。不要主动设置该显示方式，系统的两个img、input都设置为了单标签（不会嵌套任何东西）。若是要用inline-block参与布局，为了标签布局不受内容影响，能够设置vertical-align:top
5.文本垂直对齐方式：vertical-align：baseline\top\bottom
9、盒模型布局
margin border padding content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
body {
margin: 0;
padding: 100px 0 0 200px;
}
/*盒模型组成部分： */
/*margin + border + padding + content
1.每部分都有本身的独立区域
2.content是宽x高，做为内容或子标签的显示区域
3.padding是内边距，没有自身颜色，完成内容的内移(保证显示区域大小不变，能够响应减少content)
4.border是边框，有宽度、样式、颜色，自身透明(transparent)时，是能够透出背景颜色的
5.margin是外边距，控制盒子的显示位置，left、top控制自身，right、bottom影响兄弟
注：margin的偏移依据当前所在位置
*/
div {
width: 100px;
height: 100px;
background-color: red;
}
owen {
/*margin: 10px;*/
margin-top: 50px;
margin-left: 10px;
/*margin-right: 10px;*/
/*margin-bottom: 100px;*/
}
owen {
/*border-color: black;*/
/*border-width: 3px;*/
/*none solid dashed dotted*/
/*border-style: solid;*/
border: red dashed 10px;
}
owen {
/*padding: 上右下左，不足找对边*/
/*padding: 10px 20px 30px;*/
padding: 10px;
}
owen {
display: block;
/*width: 100px;*/
width: 80px;
/*height: 100px;*/
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<!--
盒模型：
概念：广义上页面中全部的标签都称之为盒子，狭义上布局的盒子指的是display:block
-->
<owen>123</owen>
<div></div>
</body>
</html>
10、浮点布局
1.父级在宽度不固定时，高度不要设置死
2.父级清浮动：
.class:after {
content:'';
display:block;
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
.wrap {
border: 10px solid yellow;
width: 300px;
/*父级在宽度不固定时高度不能设置死*/
/*height: 300px;*/
}
/*清浮动：父级清浮动，就是在本身宽度是否肯定下，都能保证父级的高度刚恰好包裹子集*/
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
font: 20px/100px 'Arial';
color: blue;
text-align: center;
}
.box {
float: left;
}
.b {
width: 500px;
height: 100px;
background-color: red;
}
/*浮动布局：
1.子集浮动参照父级宽度
2.子集浮动再也不撑开父级高度
3.父级高度须要本身处理，不然会影响兄弟布局，采用清浮动处理
*/
</style>
<style>
/*会显示在标签内容的前面*/
h1:before {
content: '123';
}
/*当控制的控制自身完成全部布局（包含全部子集布局），再执行该时间点*/
h1:after {
content: '000';
}
</style>
</head>
<body>
<h1>内容</h1>
<!--.wrap>.box{$}*9-->
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<div class="b"></div>
</body>
</html>
11、两种布局总结
1.经过盒模型，自动获取外边距留白区域，能用内边距尽可能使用内边距
2.经过浮动布局来实现子标签内容在父标签中显示，父级必定要用清浮动
3.父子级顶端产生距离，推荐使用padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两种布局总结</title>
<style>
body, h1 {
margin: 0;
}
</style>
<style>
.header {
width: 1210px;
height: 100px;
background-color: orange;
/*自动获取留白区域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
.header:after {
content: '';
display: block;
clear: both;
}
.header a {
display: block;
width: 500px;
height: 100px;
background-color: red;
float: left;
}
.header form {
/*background-color: pink;*/
float: right;
/*父子级顶端产生距离，建议使用padding*/
padding-top: 30px;
}
.header input {
/*margin-right: 20px;*/
width: 220px;
height: 30px;
border: none;
font-size: 17px;
vertical-align: top;
}
.header button {
width: 32px;
height: 32px;
border: none;
background-color: red;
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
}
</style>
</head>
<body>
<!--盒模型:margin、padding协调操做，能用padding尽可能用padding，再考虑用margin-->
<!--浮动:须要左右排列的block采用浮动布局，且父级必定要清浮动-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button type="submit">Go</button>
</form>
</div>
</body>
</html>
- 1. CSS实现样式布局
- 2. 布局css样式
- 3. CSS学习篇（七） 布局
- 4. CSS（非布局样式）
- 5. css样式--flex布局[css3]
- 6. CSS+DIV网页样式与布局——文字样式&段落（一）
- 7. CSS+DIV网页样式与布局——文字样式&段落 （二）
- 8. 第六十七篇 SPI简单介绍
- 9. 经常使用css样式(布局)
- 10. CSS（非布局样式总结）
- 更多相关文章...
- • ASP.NET MVC - 样式和布局 - ASP.NET 教程
- • ASP.NET Web Pages - 页面布局 - ASP.NET 教程
- • 再有人问你分布式事务，把这篇扔给他
- • Docker容器实战(六) - 容器的隔离与限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS实现样式布局
- 2. 布局css样式
- 3. CSS学习篇（七） 布局
- 4. CSS（非布局样式）
- 5. css样式--flex布局[css3]
- 6. CSS+DIV网页样式与布局——文字样式&段落（一）
- 7. CSS+DIV网页样式与布局——文字样式&段落 （二）
- 8. 第六十七篇 SPI简单介绍
- 9. 经常使用css样式(布局)
- 10. CSS（非布局样式总结）