CSS
选择器
基本选择器
-
class选择器
.class名 { 属性:值; } -
id选择器
#id名 { 属性:值; } -
标签选择器
标签 { 属性:值; } -
优先级：id > class > 标签
层次选择器
-
后代选择器：在某个元素的后面
body p{ background:red; } -
子选择器：一代 儿子
body>p{ background:red; } -
相邻兄弟选择器： 同辈 只有一个 相邻向下
.active + p{ background:red; } -
通用选择器：当前选中元素向下的所有兄弟
.active~p{ background:red; }
结构伪类选择器
/*ul的第一个元素*/
ul li:first-child{
background:red;
}
/*ul的最后一个元素*/
ul li:last-child{
background:red;
}
/*p标签的父级元素，选中父级元素下的第一个，并且是当前元素才生效！*/
p:nth-child(1){
background:red;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(2){
background:red;
}
美化网页元素
属性选择器(常用)
- 标签[属性=值]
- 标签[属性*=值] 匹配所有
- 标签[属性^=值] 匹配开头
- 标签[属性$=值] 匹配结尾
元素的常用属性
1、字体属性(font)
-
大小 ：font-size
x-large (特大) xx-small;(极小) 一般中文用不到，
还可以使用单位来表示：ps em rem
-
样式：font-style
oblique （偏斜体) italic(斜体) normal(正常)
-
行高：line-height
normal(正常) 单位：PX、EM
-
粗细：font-weight
bold(粗体) lighter(细体) normal(正常)
还可使用数值100-900，定义由粗到细的字符。
400 等同于 normal，而 700 等同于 bold。
-
修饰：text-decoration
underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)
-
字体： font-family)
常用字体：“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sansserif, Verdana
2、背景属性： (background)
-
背景颜色
这个属性接受任何合法的颜色值，
1、三基色比例表示， #RRGGBB，前两位是红色，中间2位是绿色，后两位是蓝色，最小是0，最 大是F。 2、rgba表示方式，rgb(255,0,0)或者rgb(100%,0,0)表示红色，可以传第四个参数代表透明度
3、英文单词 background-color: #FFFFFF background-color: rgb(255,0,0,.5) background-color: red
-
图片
{background-image: url();}
-
重复
{background-repeat: no-repeat;}
-
滚动
background-attachment:
fixed(固定) scroll(滚动)
-
位置
background-position：
left(水平) top(垂直)
-
简写方法
{background:#000 url(…) repeat fixed left top;}
/简写·这个在阅读代码中经常出现，要认真的研究/、
3、列表属性： (List-style)
-
类型：list-style-type:
disc(圆点) circle;(圆圈) square(方块) decimal;(数字)
lower-roman (小罗码数字) upper-roman ower-alpha（希腊） upper-alpha
-
位置：list-style-position
outside(外) inside
-
图像：list-style-image:
url(…);
4、边框属性： (Border)
-
边框类型：border-style
dotted(点线) dashed(虚线) solid（实线） double(双线)
groove(槽线) ridge(脊状) inset (凹陷) outset;
-
边框宽度：border-width
-
边框颜色：border-color
-
简写方法：border ：1px solid color;
5、区块属性： (Block)
-
字间距 ：letter-spacing
可以使用px等单位
-
对齐：text-align
left;(左对齐) right;(右对齐) center(居中)
-
缩进：text-indent
数值px
-
垂直对齐 ：vertical-align:
baseline(基线) sub(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
-
词间距：word-spacing
数值
-
显示：display（重要）
none(不显示)
inline(默认：内联元素)
block(块)
inline-block（行内块元素）
list-item;(列表项)
块级元素(block)特性：
- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
- 和相邻的内联元素在同一行;
- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
- div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , ol , p , table , ul , li
内联元素主要有：
- a , i , img , input , select , span , strong ,textarea
6、盒子模型
对于块状元素，多个元素套在一起就像几个盒子套在一起，怎么紧凑的排版是个问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VJtlH31y-1614068357508)(C:\Users\HT\AppData\Roaming\Typora\typora-user-images\image-20210223102801832.png)]
-
宽：width
表示内容区域的宽度
-
高：height
表示内容区域的宽度
-
外边距：margin
margin-top：本元素顶部距离上一个元素的距离
margin-bottom：本元素低部距离上一个元素的距离
margin-left：本元素左侧部距离上一个元素的距离
margin-right：本元素右侧距离上一个元素的距离
合并写： margin: 上 右 下 左 margin:10px 10px 10px 10px;
还可以是 margin: 上下 左右 margin:10px 10px;
左右居中 margin:0 auto; 或者 margin: auto;
垂直居中后边说。
-
内边距：padding
padding-top：本元素顶部空出的距离
padding-bottom：本元素低部空出的距离
padding-left：本元素左侧部空出的距离
padding-right：本元素右侧空出的距离
合并写： padding: 上 右 下 左 padding:10px 10px 10px 10px;
还可以是 padding: 上下 左右 padding:10px 10px;
-
box-sizing：定义如何计算元素的宽度和高度:是否应该包含填充和边框
默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着：当您设置元素的宽度/高度时，元素通常看起来比 您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。
content-box：More Actionscontent-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应 用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定 的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。
7、定位属性： (Position)
文档流是指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自 己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，自上而下，自左到右的顺序),这是普 通流的说法。
绝对定位和固定定位会使元素脱离文档流布局。
-
定位：Position:
static：文档流定位，默认的。
absolute：绝对定位
relative;： 相对定位
fixed: 固定定位
-
可见性：visibility
inherit（继承父元素）;
visible（可见）
hidden（隐藏）
-
溢出：overflow
visible（可见）
hidden（隐藏）
scroll（滚动）;
8、浮动
（1）定义浮动：float
-
left（左浮动） right（右浮动）
-
浮动的问题
浮动元素会脱离了文档流，造成父元素的高度坍塌，所以包围图片和文本的 div 不占据空间。于是使用 了浮动的元素，后边紧跟其他元素会错乱，就要清除浮动。
（2）清除浮动
1、通过属性clear:both;达到清除浮动的目的；
元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。
<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
ul{
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
<div style="clear: both;"></div>
</ul>
2、通过给父级元素添加伪类after，达到清除浮动的目的；
这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。
<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
.cc:after {
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
ul{
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>
3、使用双伪类；
此方式和三原理一样，代码更简洁。
<style type="text/css">
li {
list-style: none;
height: 100px;
width: 100px;
float: left;
background: red;
margin-left: 20px;
}
.cc:after,
.cc:before {
content: "";
display: block;
clear: both;
}
ul {
background: pink;
}
</style>
<ul class="cc">
<li></li>
<li></li>
</ul>
常见网页布局
现在的网页差不多都采用分列布局，常见的有单列布局（如百度首页）、双列布局、三列布局和混合布 局，超过三列的布局很少见，在此只介绍以上四种。
注：混合布局可以看作是在三列布局的基础上，再继续分块。本文仅从宏观结构上介绍，比如新浪、腾讯首页可以看作是三列布局，淘宝、京东首页可以看做是混合布局，这些大型网站会根据其内容 更改其布局。
最简单的要数单列布局了，这种布局适合各种搜索引擎主页，干净的界面和较少的干扰信息给用户较好的体验。
可以发现，网页布局无非就是并列、嵌套、层叠这几种，将网页的结构分辨清楚，要设计出类似的网站也就不是什么难题了。下面来分析一下布局的相关代码：
单列布局在于设置块状元素居中，只需设置margin:0 auto;(前面的0是上下外面局，可任意设置)。
两列布局在于设置中间主体并排分布，在左边的块设置float:left，在右边的块设置float:right即 可，当然要使两者的width之和等于某一设定值；
三列布局只是在两列布局的基础上再将中间块进行二次分割，方法一致，在此不做赘述。
最后说一下混合布局中的一个注意事项：由于中间主体设置了float，最后的footer需要通过清除浮 动来正确显示在主体下方，clear:both。
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
