web前端开发 - 2 CSS基本属性的用法
1、CSS简介
英文全名：cascading style sheets
定义: 层叠样式表, 是WEB标准中的表现标准语言, 表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
2.css语法
CSS语法：选择符{属性：属性值；属性：属性值；}
| 属性 | 属性值 | 功能 |
|---|---|---|
| text-align | center, left, right | 文字居中格式 |
| font-size | 18px | 设置文字大小 |
| font-family | 微软雅黑, 宋体等 | 设置字体 |
| font-weight | normal(默认), bold(粗体), 100px ,等 | 设置字体加粗 |
| font-style | normal(默认), italic(斜体) | 设置字体样式 |
| color | 颜色值 | 设置文字颜色 |
| background-color | 颜色值 | 设置背景颜色 |
3.样式的创建
(1) 内部样式:
(2) 外部样式:
第一种:
rel（relation）：用于定义文档关联，表示关联样式表；
type：定义文档类型
第二种:
注意:a. @和import之间没有空格 url和小括号之间也没有空格；必须结尾以分号结束
b. @import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
(3)内联样式:
语法：<标签 style="属性：属性值;属性:属性值;">
4.样式表的优先级
A、内联样式表的优先级别最高
B、内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
5.css选择器
| 序号 | 选择器 | 语法 |
|---|---|---|
| 1 | 标签选择器 | 标签名称{属性：属性值；} |
| 2 | id选择器 | #id名{属性：属性值;} |
| 3 | class选择器 | .class名{属性：属性值;} |
| 4 | 通配符 | *{属性：属性值；} |
| 5 | 群组选择器 | 选择符1，选择符2，选择符3{属性：属性值;} |
| 6 | 包含选择器 | 选择符1 选择符2{属性：属性值;} |
| 7 | 伪类选择器 | 如下 : 注意3 |
注意1: class选择器 定义类名称要规范: 如下表格是常见的命名:
| 部位 | 命名 |
|---|---|
| 头 | header |
| 内容 | content |
| 尾 | footer |
| 导航 | nav |
| 侧边栏 | sidebar |
| 标志 | logo |
| 广告 | banner |
| 页面主体 | main |
注意2 : 包含选择器选择符之间是用空格隔开,并且选择符1>大于选择符2;
而群组选择器选择符之间是用逗号隔开.
注意3. 伪类选择器
语法 ：
a:link{属性：属性值;}超链接的初始状态;
a:visited{属性：属性值;}超链接被访问后的状态;
a:hover{属性：属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性：属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
例如:
a:hover{color: red;}
a{text-decoration: none;} /*去掉超链接的下划线*/
6.css选择器的权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
伪类选择器的权重为0001
包含选择器的权重：为包含选择符的权中之和
内联样式的权重为1000
!important 语法是提升指定样式条目的应用优先权
7.浮动属性的应用
A. 语法: float : none / left / right ;
B. float: 定义网页中其它文本如何环绕该元素显示
C. 浮动的目的: 就是让竖着的东西横着来
D. 浮动的三个取值:
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值，不浮动。
E. 清除浮动的三种方法 :
a. 语法：.clear{clear:both;} 不常用
b. 语法：.clear{overflow:hidden;} 不建议使用
c. 语法：最流行、最常用、可兼容所有浏览器 , 开发时推荐使用
clear：after{
display:block;
clear:both;
content:".";
visibility:hidden;
height:0;}
clear{zoom:1;}
牢记:对于CSS的清除浮动(clear)，这个规则只能影响使用清除的元素本身，不能影响其他元素
8.css文本属性
| 序号 | 功能 | 语法 |
|---|---|---|
| 1 | 文本大小 | font-size : value |
| 2 | 文本颜色 | color : 颜色值 |
| 3 | 文本字体 | font-family : 字体1，字体2，字体3 |
| 4 | 文字加粗 | font-weight : bolder(更粗的) / bold（加粗）/ normal（常规）/100—900 |
| 5 | 文字倾斜 | font-style：italic / oblique / normal（取消倾斜，常规显示） |
| 6 | 水平对齐方式 | text-align : left / right / center |
| 7 | 文字行高 | line-height : normal / value |
| 8 | 文本修饰 | text-decoration : none / underline(添加下划线) / overline / line-through |
| 9 | 首行缩进 | text-indent : value (例如: text-indent : 2em ) |
| 10 | 字间距 | letter-spacing : value |
| 11 | a标签清除圆点 | list-style: none |
| 12 | a标签清除下划线 | text-decoration: none |
注意: 文字属性可简写
font属性的简写：字号，行高，字体
font:12px/24px "宋体";
font-size:12px; line-height:24px; font-family:”宋体”;
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
9.css列表属性
| 序号 | 功能 | 语法 |
|---|---|---|
| 1 | 定义列表符号样式 | list-style-type：disc(实心圆) / circle(空心圆) / square(实心方块) / none(去掉列表符号)；list-style-type : none===list-style : none; |
| 2 | 使用图片作为列表符号 | list-style-image：url(所使用图片的路径及全称)； |
| 3 | 定义列表符号的位置 | list-style-position : outside(外边) / inside(里边)； |
10.css背景属性
| 序号 | 功能 | 语法 |
|---|---|---|
| 1 | 背景颜色 | background-color : 颜色值 ; |
| 2 | 背景图片的设置 | background-image：url(背景图片的路径及全称)； |
| 3 | 背景图片平铺属性 | background-repeat : no-repeat(不平铺)/repeat(平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺) ; |
| 4 | 背景图的固定 | background-attachment : scroll(滚动) / fixed(固定) ; |
| 5 | 背景图片的位置 | background-position : left / center/right/(水平向上)或数值 top/center/bottom/(水平向下)或数值 |
11.css边框属性
| 序号 | 功能 | 语法 |
|---|---|---|
| 1 | border : 边框宽度 边框风格 边框颜色 | border : 5px solid red |
| 2 | 边框圆角(倒角) | border-radius : 25px |
| 3 | 边框阴影 | box-shadow : 10px 10px 5px #888888; |
| 4 | 边框样式 | border-style : solid(实线)/ dashed(虚线) |
| 5 | 单独设置各边 | border-top-style : dotted ; border-right-style : solid ; border-bottom-style : dotted ; border-left-style : solid; |
| 6 | 边框宽度 | border-width : 20px |
补充 : 锚点链接
1.HTML标签
2.
3.
4.回到顶部
执行效果: 点击4跳转到2, 点击1跳转到3