1.CSS是什么
CSS:层叠样式表 ( Cascading Style Sheets ),其是用来静态地修饰网页,还可以配合脚本语言动态地对网页各元素进行格式化。
2.CSS的基本语法:选择器 {样式}
(1)选择器
1)选择器是什么
选择器是一种将根据不同需求将不同标签选择出来的语法表达。
2)选择器分类
分为:基础选择器和复合选择器
基础选择器有:标签选择器、类选择器、ID选择器和通配符选择器
a)标签选择器以标签名称作为选择器,为所有同一个标签设定相同样式。
标签选择器语法:直接为标签名称,其应用例子:
<!-- 为所有p标签中内容设置为绿色 -->
p {color: green;}
b)类选择器以标签的类属性作为选择器,为所有有同一个类属性值设定相同样式。
类选择器语法:以点(.)开头,紧跟着类(class)属性的值,其应用例子:
<!-- 为所有标签的类属性值为redxx的内容设置为绿色 -->
.redxx {color: green;}
<p class="redxx">
类选择器
</p>
类的属性值并不是唯一的,即可以用不同的标签拥有相同的类属性值。
高级用法:类属性可以有多个值,多个值之间用空格分隔,其应用例子:
<!-- 为所有标签的类属性值为redxx的内容设置为绿色、为类属性值为fontsize35的内容设置为100px -->
.redxx {color: green;}
.fontsize35 {font-size:100px;}
<p class="redxx fontsize35">
类选择器
</p>
c)ID选择器以标签的ID属性作为选择器,为有该ID属性值的内容设定样式。
类选择器语法:以#开头,紧跟着ID属性的值,其应用例子:
<!-- 为ID属性值为idselector的内容设置为绿色 -->
#idselector {color: green;}
<p id="idselector">
ID选择器
</p>
ID的属性值是唯一的,不能出现两个一样的ID值。
d)通配符选择器(不常用)
(2)样式
1)样式是以健值对的形式出现,健值对以分号结尾,如: {属性:属性值 ;}
2)样式种类
a)字体系列,属性有:字体(宋体等)、字体大小、字体粗细、文字样式(斜体)
font-family、font-size、font-weight、font-style,字体系列的每种属性单独写法如上,
字体系列复合语法:font:font-style font-weight font-size/line-height font-family,其应用例子:
font:italic 700 16px 'Microsoft yahei'
其中每个属性的顺序不能变,font-size和font-family必须要有。
b)文本系列,属性有:颜色、水平对齐、装饰文本(下划线、删除线、上划线)、文本缩进、行高
color、text-align、text-decoration、text-indent、line-height
注:行高=文本大小+上下间距
3.CSS的使用方式
(1)行内样式表
在HTML文件中,为标签添加style属性,如下:
<p style="color:green;">行内样式表</p>
(2)内部样式表
在HTML文件里,在head标签中,在style标签内进行设置CSS,如下:
<head>
<style>
body {background-color:#eeeedd;}
</style>
</head>
(3)外部样式表
利用单独CSS文件为HTML提供样式,文件以.css作为后缀。外部样式表的引入,如下:
<head>
<link rel="stylesheet" href="all.css">
</head>