Web前端H5之CSS样式总结
1、CSS介绍
概念：层叠样式表或者级联样式表(Cascading Stylr Sheets)
层叠;CSS特性
CSS作业：设置⽹页结构的样式（改变html标签的样式），通过CSS给HTML标签设置属性到改变样式
CSS书写位置介绍：
* 内嵌式写法：书写在HTML的head位置
<style type="text/css">书写CSS代码</style>
* 外链式写法
* ⾏内式写法
CSS语法：
* 选择器 {属性：值；属性：值}
选择标签的过程
** 标签选择器
** 类选择器
** id选择器
** 通配符选择器
** 交集选择器（标签指定式）
** 后代选择器
** ⼦代选择器
** 并集选择器
补充选择器(C3)：
伪类选择器：
属性选择器
伪元素选择器：
* CSS样式的基本属性（字体属性，颜⾊属性，边框属性）
** 字体属性：主要包括字体综合设置、字体名称、字体⼤⼩、字体风格、字体加粗、字体英⽂⼤⼩写转换
font：设置或者检索对象中⽂本特性的复合属性
font-family:⼀个指定字体名称或者⼀个种类的字体名称(⼀次可以设置多个字体，字体与字体之间⽤“，”隔开)                    * 直接设置字体对应的名称（⿊体，宋体）
* 设置字体对应的英⽂名称（SimSun,NSimSun,SimHei）
font-size：字体显⽰的⼤⼩
font-style：以3种⽅式的⼀种显⽰字体：normal(普通)、italic(斜体)和oblique(倾斜)
font-weight：使字体加粗或者变细（normal，700-加粗，bold-加粗，400-正常显⽰）
font-variant：设置英⽂⼤⼩写转换
** 颜⾊和背景属性
CSS的颜⾊属性允许设计者指定页⾯元素的颜⾊，背景属性⽤于指定页⾯的背景颜⾊或背景图像的属性
color：设定页⾯颜⾊的前景⾊
background-cokor：设定页⾯元素的背景⾊
background-image：设定页⾯元素的背景图像
background-repeat：设定⼀个指定的背景图像被重复的⽅式
background-attachment：设定背景图像是的跟随页⾯滚动
background-position：谁当⽔平或者垂直⽅向上的位置
background：背景属性的综合指定
** 边框属性
⽤于设置⼀个元素边框的宽度、样式和颜⾊
border  边框符合属性
border-top：上边框
border-left：左边框
border-right：右边框
border-bottom：下边框
border-color：边框颜⾊
border-style：边框样式
border-width：边框宽度
border-top-color：上边框颜⾊
border-bottom-color：下边框颜⾊
border-left-color：左边框颜⾊
border-right-color：右边框颜⾊
border-top-style：上边框样式
border-bottom-style：下边框样式
border-left-style：左边框样式
border-right-style：右边框样式
border-top-width：上边框宽度
border-top-width：上边框宽度
border-bottom-width：下边框宽度
border-left-width：左边框宽度
border-right-width：右边框宽度
**边框样式属性
none:⽆边框
hidder：隐藏边框（IE不⽀持）
dotted：边框由点组成
dashed：边框由短线组成
solid：边框是实线
double：边框是双实线
groove：边框带有⽴体感的沟槽
ridge：边框成脊型
inset：边框内嵌⼀个⽴体边框
outset：边框外嵌⼀个⽴体边框
* 标签选择器
HTML标签名 {属性：值；}：会把页⾯中的所有相同的标签都会选中常⽤属性：
color：设置前景⾊（⽂字颜⾊）
background-color：设置背景⾊
font-size：设置⽂字⼤⼩
width：设置宽度
height：设置⾼度
text-align: center；设置内容（⽂字、图⽚）显⽰位置
注意：该属性只能给块级元素设置
text-indent: 2em; 设置⾸⾏缩进两个字符
<style type="text/css">
/*标签选择器*/
p {
color:rgb(234,12,12);  /*改变⽂字颜⾊*/
font-size: 50px; /*改变⽂字⼤⼩ */
background-color:#D82F92; /*改变背景颜⾊*/
width: 300px; /*设置宽度*/
height: 300px;  /*设置⾼度*/
}
</style>
* 单位介绍
px：像素
em:1em = ⼀个⽂字⼤⼩
* 颜⾊的表⽰⽅式
** 直接设置颜⾊的名称：red,green,pink
** 使⽤⼗六进制表⽰ #0-f
** 使⽤三原⾊rgb()
r：0-255
g:0-255
b:0-255
** 半透明颜⾊:background-color: rgba(0,0,0,0.5);
rgba()
a : 0-1
** 使⽤opacity实现半透明
opacity:0-1
background-color: #D82F92;
opacity: 0.5;
filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/
* 类选择器
.⾃定义类名 {属性：值；}
使⽤：
** 通过.⾃定义类名，定义⼀个类样式
.p_red { color: red;}
** 标签通过class属性调⽤类样式
<p class="p_red">类选择器1</p>
<p class="p_red">类选择器1</p>
特点：
** ⼀个类样式可以被多个标签调⽤
** ⼀个标签可以同时调⽤多个类样式，只需要在类名字之间加⼀个空格
<p class="p_red public_size">类选择器1</p>
<p class="p_green public_size">类选择器2</p>
命名规范：
头;header
内容：content、container
尾：footer
导航：nav
侧栏：sidebar
栏⽬：column
页⾯外围控制整体布局宽度;wrapper
左右中;left right center
登录条：loginbar
标志:logo
⼴告：banner
页⾯主体：main
热点：hot
新闻：news
下载：download
⼦导航：subnav
菜单：menu
⼦菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
注意：不能使⽤纯数字或者以数字开头定义类名
不能使⽤中⽂命名
不能使⽤特殊字符或者使⽤特殊字符开头定义类名
不推荐使⽤类名和标签名定义类名
* ID选择器(不建议⽤)
语法：#⾃定义名称 {属性：值；}
使⽤：
** ⾸先通过#⾃定义名称，定义⼀个id选择器样式
#p_color {color:red;}
** 标签通过id属性调⽤id样式
<div id="p_color">gerrynihao</div>
ID选择器与类选择器的区别：
** 页⾯中标签的id必须唯⼀，不能重⽤样式的定义
** ⼀个标签只能调⽤⼀个id样式，id选择器不能调⽤多个ID样式，类选择器可以调⽤多个类样式        * 通配符选择器
语法：* {属性：值；}
特点：该选择器会把所有标签都选中（包括body选择器）
应⽤：样式初始化使⽤（因为不同的浏览器有不同的默认样式，需要初始化页⾯的⽂字样式）
* font属性联写
font:font-size font-weight font-style font-family line-height
font:700(粗体) italic(斜体) 30px(字体⼤⼩)/20px(⾏⾼) 微软雅⿊;
注意：
1.属性联写书写过程中必须要设置font-size和font-family，其他可以设置也可以不设置
2.在属性联写中font-size必须要放在font-family之前（例如：30px/20px 微软雅⿊）
3.如果font属性联写中的属性都要设置，则按照上⾯顺序设置
* 复合选择器
**标签指定式选择器
语法：
标签名.类名 {属性：值；}
或者标签名#id名 {属性：值；}
< {
color: red
}
** 后代选择器
注意：
1，后代选择器标签之间必须是嵌套关系
2.选择器与选择器之间必须⽤空格隔开
3.后代选择器只能选择后代标签
语法：
选择器选择器选择器 {属性：值；}
div p {
color: green
}
* 并集选择器
语法：
选择器，选择器 {属性：值}
注意：
1.选择器与选择器之间必须⽤“，”隔开
2.选择器标签之间的结构可以是任意⼀种关系
* ⼦代选择器
语法：
选择器>选择器 {属性：值；}
注意：
1.⼦代选择器之间必须是嵌套结构
2.⼦代选择器只能选中直接后代元素
3.后代选择器可以选中所有后代元素
div>span {
color: red;
}
* 属性选择器(会把页⾯中所有的属性相同的样式进⾏改变)语法:
[属性名] {属性：值；}
[id][class] {
html网页设计csscolor: red;
}
属性其他选择器
[属性=值] {}
[属性^=字母] { }  选中以字母开始的标签
[属性$=字母] { }  选中以字母结尾的标签
[属性*=字母] { }  选中包含字母的标签
* 伪类选择器（⽤于列表标签）
◇结构伪类
语法：
选择器：first-child {属性: 值;}
选择器：last-child {属性: 值;}
选择器: nth-child(n) {属性: 值;}
选择器:nth-last-child(n) {属性: 值;}
选择器:nth-child(odd) {属性: 值;} 奇数
选择器:nth-child(even) {属性: 值;} 偶数
◇⽬标伪类
◇空伪类
◇排除伪类

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。