CSS基础知识点详细总结（⼀）
CSS是 Cascading Style Sheets 的⾸字母缩写，意思是层叠样式表。⽬的是为了让⽹页元素的样式更加丰富，也为了让⽹页的内容和样
式能拆分开，CSS由此思想⽽诞⽣，有了CSS，html中⼤部分表现样式的标签就废弃不⽤了，html只负责⽂档的结构和内容，表现形式完
全交给CSS，html⽂档变得更加简洁。
⽬录
1、基本语法及引⽤⽅法
1.1基本语法
css的基本定义⽅法是：
选择器 { 属性：值; 属性：值; 属性：值;}
选择器是将样式和页⾯元素关联起来的名称，属性是希望设置的样式属性每个属性有⼀个或多个值。选
择器有很多种，下⾯有介绍。
例如：
div{ width:100px; height:100px; color:red }
1.2三种引⽤⽅法
内联式 ：通过标签的style属性，在标签上直接写样式。
<div >
HTML是 HyperText Mark-up Language 的⾸字母简写，意思是超⽂本标记语⾔，超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹页的语⾔，这种语⾔由⼀嵌⼊式：通过style标签，在⽹页上创建嵌⼊的样式表。
<style type="text/css" >
div{color:red;
font-size:20px;
font-family:'Microsoft Yahei';
line-height:40px;
}
</style>
外联式：通过link标签，链接到外部样式表到页⾯中。如下⾯例⼦中在对应⽂件夹下新建main.css，将样式写⼊其中。
<link rel="stylesheet" type="text/css" href="css/main.css">
CSS的引⼊⽅式和JS很类似，有些⽹站为了增加⾸页的加载速度，会把⾸页的CSS和JS采⽤嵌⼊式。
2、css⽂本设置
常⽤的应⽤⽂本的css样式：
color 设置⽂字的颜⾊，如： color:red;
font-size 设置⽂字的⼤⼩，如：font-size:12px;
font-family 设置⽂字的字体，如：font-family:'微软雅⿊';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic'；设置⽂字倾斜 normal（标准） italic（斜体字体样式） oblique（倾斜字体样式）
font-weight 设置⽂字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 normal（标准 400）bold（粗体字体 700）bolder（跟粗的字体） lighter（更细的字体）
font 同时设置⽂字的⼏个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/⾏⾼ 字体；如： font:normal 12px/36px '微软雅⿊';
line-height 设置⽂字的⾏⾼，如：line-height:24px;
text-decoration 设置⽂字的下划线，如：text-decoration:none; 将⽂字下划线去掉 none（默认值）underline（⽂本下划线）overline（⽂本上划线）line-through（⽂本删除线）
text-indent 设置⽂字⾸⾏缩进，如：text-indent:24px; 设置⽂字⾸⾏缩进24px
text-align 设置⽂字⽔平对齐⽅式，如text-align:center 设置⽂字⽔平居中 left（排列在左侧，默认值）right（排列在右边）center（排列在中间）justify（实现两端对齐⽂本效果）
⽂本⽔平居中 text-align:center ，那垂直中间呢？⼩技巧：让⽂本⾏⾼等于⽗级盒⼦⾼度，这样⽂字就会垂直居中。
3、颜⾊表⽰法
css颜⾊值主要有三种表⽰⽅法：
1、颜⾊名表⽰，⽐如：red 红⾊，gold ⾦⾊
2、rgb表⽰，⽐如：rgb(255,0,0)表⽰红⾊
3、16进制数值表⽰，⽐如：#ff0000 表⽰红⾊，这种可以简写成 #f00
CSS3中增加了新的颜⾊表⽰法，添加了透明度的概念
rgba（新的颜⾊值表⽰法）
1、盒⼦透明度表⽰法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表⽰颜⾊，第四个数值表⽰颜⾊的透明度
<style type="text/css" media="screen"> .box1{
background-color: red;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei'; color: #fff;
text-align: center;
}
.box2{
background-color: #ff0000;
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei'; color: #fff;
text-align: center;
}
.box3{
background-color: rgb(255,0,0);
/*透明度0.5 （兼容IE）*/
opacity:0.5;
filter:alpha(opacity=10);
width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei'; color: #fff;
text-align: center;
}
.box4{
background-color: rgba(255,0,0,0.5); width: 100px;
height: 100px;
margin-top: 20px;
font:bold 14px/100px 'Microsoft Yahei'; color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">颜⾊名</div>
<div class="box2">16进制</div>
<div class="box3">rgb</div>
<div class="box4">rgba</div>
</body>
颜⾊渐变
⽐较常⽤的是透明度线性渐变：
<style>
#grad1 {
width:200px;
height: 100px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使⽤ rgba() 函数来定义颜⾊结点。rgba() 函数中的最后⼀个参数可以是从 0 到 1 的值，它定义了颜⾊的透明度：0 表⽰完全透明，1 表⽰完<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不⽀持渐变。</p>
4、选择器
常⽤的选择器有如下⼏种：
4.1、标签选择器
标签选择器，此种选择器影响范围⼤，建议尽量应⽤在层级选择器中。
举例：
*{margin:0;padding:0}
div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
4.2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不
推荐使⽤id作为选择器。
举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上⼀条样式，其它元素不允许应⽤此样式 -->
4.3、类选择器
通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。
举例：
.red{color:red}
.big{font-size:20px}
css设置文字垂直居中.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4.4、层级选择器
主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
4.5、组选择器
多个选择器，如果有同样的样式设置，可以使⽤组选择器。
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
4.6、伪类及伪元素选择器
常⽤的伪类选择器有hover，表⽰⿏标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中插⼊内容。⼀般a 标签⽤的⽐较多。
.box1:hover{color:red}
.box2:before{content:'⾏⾸⽂字';}
.box3:after{content:'⾏尾⽂字';}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
CSS3中新增了⼀些选择器，实现起来更加灵活，详见XXX
5、盒⼦模型
5.1 盒⼦模型解释
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论