HTML 标签原本被设计为用于定义文档内容,但随着HTML的 发展,为了满足页面设计的更多要求,HTML增加了许多的显示功能,导致HTML变得越来越杂乱,页面也越来越臃肿,于是CSS便应运而生了。 CSS (Cascading Style Sheets) 即层叠样式表,用来美化HTML标签。通过使用CSS可以实现表现和内容的分离,同时提高了页面浏览的速度,也更加的易于维护和改版
CSS 两个主要的部分构成:选择器,以及一条或多条声明。
选择器{声明1;... 声明N;}
选择器通常是需要改变样式的HTML元素,而每条声明则是由一个属性和一个值组成。以下是一些常用的属性:
Width:20px; 宽 Height:20px; 高 Background-color:red; 背景颜色 font-size:24px; 文字大小 text-align:left | center| right 内容的水平对齐方式 text-indent:2em; 首行缩进 Color:red; 文字颜色
标签名{属性名:值;}
标签选择器
.自定义类名{属性:值; }
类选择器
特点: 1.谁调用,谁生效。 2.一个标签可以调用多个类选择器。 3.多个标签可以调用同一个类选择器。 类选择器命名规则 ◎不能用纯数字或者数字开头来定义类名 ◎不能使用特殊符号或者特殊符号开头(_)来定义类名 ◎不建议使用汉字来定义类名 ◎不推荐使用属性或者属性的值来定义类名
#自定义名称{属性:值;}
ID选择器
特点:
*{属性:值;}
概念:两个或者两个以上的基础选择器通过不同的方式连接在一起
标签+类/ID选择器{属性:值;}
特点:即要满足使用了某个标签,还要满足使用了类(id)选择器
选择器+空格+选择器{属性:值;}
特点:
选择器>选择器{属性:值;}
特点:选中直接下一代元素
选择器+,+选择器+,选择器{属性:值;}
font: font-style font-weight font-size/line-height font-family
如:font:italic 700 16px/40px 微软雅黑
◆注意:font:后边写属性的值。一定按照书写顺序。文本属性连写时文字大小和字体为必写项。字体可写中文名称,或英文名称,或unicode 编码
<head>
<style type=”text/css”>
样式表写法
</style>
</head>
<link rel="stylesheet" href="1.css">
<h1 style="font-size:30px; color:red;">hello</h1>
◆三种写法特点: ★内嵌式写法,样式只作用于当前文件,没有真正实现结构表现分离。 ★外链式写法,作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离。 ★行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。 (不推荐使用)
div,p{
display:inline;
}
span{
display:block;
}
div,p,span{
display:inline-block;
}
当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系
继承性发生的前提是包含(嵌套关系) ★文字颜色可以继承 ★文字大小可以继承 ★字体可以继续 ★字体粗细可以继承 ★文字风格可以继承 ★行高可以继承 总结:文字的所有属性都可以继承。 ◆特殊情况: h系列不能继承文字大小。 a标签不能继承文字颜色。
样式: 默认样式<标签选择器<类选择器<id选择器<行内样式<!important 权重: 0 < 1 < 10 <100 < 1000 < 1000以上
特点: ★继承的权重为0 ★权重会叠加
a:link{属性:值;} a{属性:值}效果是一样的。
a {
//链接文本的修饰
text-decoration: none | underline | line-through
}
a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态 :focus{属性:值;} 获取焦点