CSS样式表(1)
(1)css概念引入css的三种方法行内式(内联样式)内部样式表(内嵌样式表)外部样式表(外链式)(2)css选择器css基础选择器标签选择器类选择器id选择器通配符选择器(3)css文字文本样式font字体字体风格字体粗细字号大小字体(4)css外观属性文本颜色文本水平对齐方式行间距首行缩进文本修饰(1)css概念
CSS(Cascading Style Sheet)
,CSS样式表或层叠样式表(级联样式表)
作用
设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式css以html为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式
引入css的三种方法
行内式(内联样式)
概念
行内样式、行间样式通过标签的style属性来设置元素的样式
基本语法
<标签名 style="属性1:属性值1;属性2:属性值2;"> 内容 </标签名>
多组属性值之间使用";
"隔开
内部样式表(内嵌样式表)
概念
内嵌式将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义
基本语法
<head><style type="text/css"[可省略]>选择器 {属性1:属性值1;属性2:属性值2;}</style></head>
只能控制当前页面
外部样式表(外链式)
概念
链入式将所有的样式放在一个或多个以.css
为扩展名的外部样式表文件中通过link标签
将外部样式表文件链接到HTML文件中
基本语法
<link rel="stylesheet" type="text/css" href="css文件路径">
单标签link标签
放在head头部标签
中,并指定link标签的三个属性
(2)css选择器
作用
找到特定HTML页面元素
css基础选择器
标签选择器
概念
HTML标签名
称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
语法
标签名 {属性1:属性值1; }
作用
把某一类标签全部选择出来
类选择器
使用".
"(英文点号
)进行标识,后面紧跟类名
• 类名选择器
.类名 {属性1:属性值1;}
• 标签
<p class="类名"></p>
多类名选择(一个标签内部只能有一个class
)
<span class="G font100">G</span><span class="two_o font100">o</span><span class="three_o font100">o</span><span class="G font100">g</span><span class="l font100">l</span><span class="e font100">e</span>
.font100 {font-size: 100px;}.G {color: blue;}.two_o {color: red;}.three_o {color: orange;}.l {color: green;}
id选择器
使用#
进行标识,后面紧跟id名
• id选择器
#id名 {属性1:属性值1;}
• 标签
<p id="id名"></p>
元素的id值是唯一的
通配符选择器
用*号标识
基本语法
* {属性1:属性值1;}
会匹配页面所有的元素,降低页面响应速度
尽量少用通用选择器*
尽量少用ID选择器
不使用无具体语义定义的标签选择器div span
(3)css文字文本样式
font字体
字体风格
.line_2 {font-style: italic;}
字体粗细
.line_2 {font-weight: 700;}
字号大小
body {font-size: 16px;}
字体
.line_1 {font-family: "宋体";}
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体
p {font-family: Arial,"Microsoft Yahei","微软雅黑";}
中文字体需要加英文状态下的引号,英文字体一般不需要加引号
当需要设置英文字体时,英文字体名必须位于中文字体名之前
若字体名中包含空格
、#
、$
等符号,则该字体必须加英文状态下的单引号或双引号
Unicode字体
文件编码(GB2312、UTF-8)不匹配会产生乱码xp系统不支持 类似微软雅黑的中文
解决
(1)使用英文代替font-family:"Microsoft Yahei"
(2)使用Unicode编码代替font-family:"\5FAE\8F6F\96C5\9ED1"
基本语法
选择器 {font: font-style font-weight font-size/line-height font-family;}
.p {font: italic 700 20px "微软雅黑";}
注意
• 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开
• 其中不需要设置的属性可以省略(取默认值),但必须保留font-size
和font-family
属性,否则font属性将不起作用
(4)css外观属性
文本颜色
作用
color
属性用于定义文本的颜色
文本水平对齐方式
作用
text-align
属性用于设置文本内容的水平对齐,相当于html中的align对齐属性
是让盒子里面的内容水平居中, 而不是让盒子居中对齐
行间距
作用
line-height
属性用于设置行间距(行与行之间的距离)(字符的垂直距离)行高
单位
line-height
常用属性值单位分别为像素px
,相对值em和百分比%
一般情况下,行距比字号大7,8像素
首行缩进
作用
text-indent
属性用于设置首行文本的缩进
属性值
可为不同单位的数量,em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值
1em
就是一个字的宽度
p {text-indent:2em;}
文本修饰
text-decoration
通常我们用于给链接修改装饰效果