CSS(上)
一、CSS代码的书写方式
1.书写方式分为三种
●嵌入式、外链式、行内式。
2.嵌入式
●通过HTML中的<style>标签将CSS代码嵌入到HTML网页中!
语法:一般放在 head 标签里。
<style>
选择器 {属性:值;
属性:值;}
</style>
3.外链式
单独写一个以 .css 为扩展名的文件,然后在 head 标签中使用 <link />标签,将这个css文件链接到html文件中。
4.行内式
将CSS代码写在HTML标签的 style 属性中。
<标签名 style = "属性:值;..."></标签名>
二、注释
不要在css里面用html的注释
/* 注释内容 */
三、选择器
选择器分为四大类:基本选择器、复合选择器、伪类选择器、属性选择器。
1.基本选择器
id选择器
一个html文件中id的属性值必须是唯一的
2.复合选择器
3.伪类选择器
是用来给超级链接不同的状态来设置样式。
四种状态:
●正常状态
●访问过后的状态
●鼠标放上的状态
●激活状态
在使用伪类选择器时,必须依顺序来写。"Love Hate" 准则
超级链接的美化
/*正常状态和访问过后的状态*/
a:link,a:visited{
text-decoration: none;
color: #444;
}
/*鼠标放上的状态*/
a:hover{
color: #f00;
ext-decoration: underline;
}
4.属性选择器
●属性选择器它是与标签的属性名和属性值有关。
●属性选择器是通过标签的属性名和属性值来匹配元素。
attr "attribute",属性。 val "value" ,值。
例如:
<style>
[align]{
color: #f00;
}
</style>
<body>
<p align="center">办法你来想</p>
<h2 align="center">还是我来想吧!</h2>
</body>
尺寸样式属性
span 标签是行内元素,不可以设置宽高。只有块级元素可以
四、文本与字体属性
1.文本属性
一个em表示一个汉字的距离。
行高的值与高度的值一样时就可以实现文本的垂直方向居中。
2.字体属性
●关于字体:一般很特殊的字体网站上面都是使用图片来表示。是否能够显示此字体是根据用户电脑里面是否有对应的字体文件,如果没有该文件就会显示为宋体。
五、列表样式
1.列表样式属性
这里的列表是指:无序列表和有序列表
list-style-image:将列表前面的项目符号设置为一张图片,它的值是:url(图片的地址)
2.外边距
HTML中的表格标记属性 cellspacing ,单元格与单元格之间的距离,在CSS中盒子与盒子之间的距离也称为外边距 margin
让盒子在浏览器中居中
margin-left:auto;
margin-right:auto;
六、继承性
●只有文本与字体样式属性能够被继承。其他样式属性都不能被继承。
●在实际工作中,我们往往会给body标签设置字体大小以及字体颜色。因为 body 标签是最外层的元素,内层的元素会继承外层元素的样式。
七、优先级
行内样式 > id选择器 > 类选择器 > 标签选择器
●一般而言,选择器指向的越准确,优先级就会越高。通常我们会用1来表示标签选择器的优先级,用10来表示类选择器的优先级,用100来表示ID选择器的优先级,用1000来表示行内样式的优先级。权重值越大优先级越高。
八、!important 属性
在CSS中的作用,使其属性值的权重值变的无穷大
语法:
属性:值 !important;
注意:
●!important 提升的是属性值的权重,而不是选择器的权重。
●!important 不能提升继承过来的变量。
九、一个标签可以有多个类名
类名:指的是class的属性值
如:
<标签名 class = "值1 值2 值3"></标签名>
多个类名的优点:
●减少CSS的代码量
●多个类名的样式会叠加到当前元素上面
十、背景样式
1.背景样式属性
●背景图片默认是平铺的(repeat)
●background 简写属性顺序不定
background-position 用于设置背景图片的位置。
background-position 水平位置 垂直位置;
三种表示方式:
①英文单词的表示方式
水平位置:left(居左)、center(居中)、right(居右)
垂直位置:top(居上)、center(居中)、bottom(居下)
②固定值的表示方式
③百分比的表示方式
三种方式可以混合使用
十一、标准文档流
在HTML网页制作中,遵循一个“流”的规则:从左至右、从上至下。