CSS知识概况
1、什么是CSS
层叠样式表（cascading style sheets），用来定义如何显示HTML元素。
有三种方法在HTML中使用CSS样式：
内联样式表：CSS代码写在现有的HTML标签中，直接使用style属性改变样式。
案例1：内联式设置
内容
嵌入式样式表：CSS样式代码写在标签之间，表示可以文档通用，一般情况下CSS写在之间。
案例2：嵌入式设置
div{
background-color:red;
color:white;
}
外部样式表：CSS代码写在一个单独的外部文件里面，这个CSS样式文件以“.CSS“为扩展名，在内使用标记来将css样式文件链接到HTML文件。
案例3：外部样式表
因为head优先级高于body，如果是相同的属性，可以使用嵌入式，如果是特殊要求的，可以使用内联式。
2、CSS选择器：
选择器通常是需要改变样式的HTML元素，每条声明由一个属性和一个值组成。包含以下几种类型：
标签选择器，比如div，找到所有的div标签，然后赋值样式，也可以用p、dr等
ID选择器，以#开始，后加名称，如"#i1"，ID标签不能重复
class选择器，以点开始，后加名称，如“.c1”
多级选择器，以.class名称+空格+标签+空格...+.+子class名称
案例4：选择器
/*标签选择器*/
div{
color:red;
}
/*ID选择器*/
#i1{
font-size:56px;
color:green;
}
/*class选择器*/
.c1{
background-color:yellow;
}
/*多级选择器，可以使用--.c2 div p a--*/
.c1 div p .c2{
background-color:green;
}
内容
id选择器
class选择器1
class选择器2
class选择器3
oo
多级标签
效果：
属性选择器，跟随class，.class[属性名='属性值']；选取class选择器下的属性
案例5：属性选择器
.sp[qita='a']{
color:red;
}
1
2
3
4
效果：
3、CSS的属性值：
4-1 颜色属性color来定义文本：
颜色名称，如color:green
十六进制，如color:#ff6600
简写方式，如color:#f60
RGB方式，如rgb(255,255,255)，
RGBA方式，如color:rgba(255,255,255,1)
4-2 字体属性
字体大小：font-size：14px
字体：font-family：微软雅黑，serif
字体加粗，font-weight，定义字体加粗，可以使用名称，如normal、bold（粗）、bolder（更粗）、lighter（更细）,还可以使用数字，700=bold
4-3 背景属性
主要包括背景颜色、背景图片、背景重复、背景位置。
背景颜色：background-color用来定义背景的颜色
背景图片：background-image，none表示不适用
背景重复：background-repeat，no-repeat，repeat-x在x轴上重复，repeat-y在y轴上重复。
背景位置：background-position。横向为left、right、center；纵向top、center、bottom；
4-4 文本属性
可以用文本属性设置行高、缩进和字符间距，
text-align 设置文本对齐方式，属性值可以取left、center、right
line-height 设置文本行高，属性值可以是具体的数值
text-indent 代表首行缩进
letter-spacing设置字符间距，比如letter-spacing：3px；
4-5：边距：
(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距 的方式：
案例6：边框，去空格
效果：
4-6 position 属性
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
fixed：按窗口固定，比如网页的头部图片固定
absolute：找上级position，会根据块级框定位，滚动时会移动
relative：单独的是没有作用的，需要和absolute结合使用，absolute相对于relative去定位
案例7：位置
其他
返回底部
返回顶部
返回中部
4-7 漂浮 属性
案例8：漂浮，一列显示
aa
bb
aa
bb
效果：
4-8 display属性
display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
4-9 其他案例：
案例9：小尖角的实现，主要是transparent的应用
.icon{
display:inline-block;
border-top:15px solid green;
border-bottom:15px solid red;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
效果：
案例10：关于布局的实现，上侧固定标题栏，左侧目录栏，右侧内容栏
/*去body空格*/
body{
margin:0;
}
/*header格式*/
.pg-header{
height:48px;
background-color:rgb(22,121,81);
}
/*body左边栏目*/
.pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color:rgb(140,199,159);
}
/*内容栏目*/
.pg-body .body-content{
position:absolute;
top:48px;
left:210px;
right:0;
bottom:0;
background-color:rgb(76,172,199);
overflow:auto;/*如果超出内容则自动添加滚动条*/
}
效果：
案例11：z-index类图层作用
.model{
width:500px;
height:300px;
background-color:green;
position:fixed;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;
z-index:10;
}
.shadow{
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
background-color:black;
opacity:0.4;
z-index:9;
}
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180107G0PTMX00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
