首页 > 代码库 > 网页设计—CSS样式基础
网页设计—CSS样式基础
1、CSS样式表
（1）行内式
行内式也称为内联样式，是通过标记的style属性来设置元素的样式。
语法格式：<标记名 style="属性1:属性值;属性2:属性值;属性3:属性值;">内容</标记名>
语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。
（2）内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。
语法格式：<head>
<style type="text/css">
选择器{属性1:属性值;属性2:属性值;属性3:属性值;}
</style>
</head>
该语法中<style>标记可以放在HTML文档的任何地方，但是由于浏览器是从上到下解析代码的把CSS代码放在头部便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。
（3）链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标记将外部样式表文件链接到HTML文档中。
语法格式：<head>
<link href="http://www.mamicode.com/CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
该语法中，<link />标记必须放在<head>头部中,并且必须设置三个属性：
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type:定义所链接文档的类型，指定text/css表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系，指定为stylesheet表示被链接的文档是一个样式表文件。
（4）导入式
导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标记，并在<style>标记内的开头处使用@import语句，即可导入外部样式表文件。
语法格式：<style type="text/css">
@import url(css文件路径);或@import "css文件路径";
/*在此还可以存放其他css样式*/
</style>
2、CSS基础选择器
（1）标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的css样式。
语法格式：标记名{属性1:属性值;属性2:属性值;属性3:属性值;}
用标记选择器定义的样式对页面中该类新的所有标记都有效。
（2）类选择器
类选择器使用"."进行标识，后面紧跟类名。
语法格式：.类名{属性1:属性值;属性2:属性值;属性3:属性值;}
类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。优势是可以为元素对象定义单独或相同的样式。
（3）id选择器
id选择器使用"#"进行标识，后面紧跟id名。
语法格式：#id名{属性1:属性值;属性2:属性值;属性3:属性值;}
id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
（4）通配符选择器
通配符选择器使用"*"表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法格式：*{属性1:属性值;属性2:属性值;属性3:属性值;}
3、CSS文本相关样式
（1）字体样式属性
1、font-size(字体大小):设置字号大小
(1)em:相对于当前对象内文本的字体尺寸 (4)cm:厘米
(2)px:像素 (5)mm:毫米
(3)in:英寸 (6)pt:点
2、font-family(字体):设置字体
3、font-weight(字体粗细):设置字体粗细
(1)normal:默认值，定义标准字符
(2)bold:定义粗体字符
(3)bolder:定义更粗的字符
(4)lighter:定义更细的字符
(5)100~900(100的整数倍):定义由细到粗的字符。其中，400等同于normal,700等同于bold,值越大字符越粗。
4、font-variant(变体):设置字体变化
(1)normal:默认值，浏览器会显示标准字体
(2)small-caps:浏览器会显示小型大写的字体
5、font-style(字体风格):设置字体风格
(1)normal:默认值，浏览器会显示标准字体样式
(2)italic:浏览器会显示斜体的字体样式
(3)oblique:浏览器会显示倾斜的字体样式
6、font(综合设置字体样式):对字体样式综合设置
格式：选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
不需要的属性可以省略，但必须保留font-size和font-family属性，否则font属性将失效。
（2）CSS文本外观属性
1、color(文本颜色):定义文本的颜色
2、letter-spacing(字间距):定义字间距
3、word-spacing(单词间距):定义英文单词间距,对中文字符无效。
4、line-height(行间距):设置行间距
(1)px:像素 (2)em:相对值 (3)%:百分比
5、text-transform(文本转换):控制英文字符的大小写
(1)none:不转换(默认值)
(2)capitalize:首字母大写
(3)uppercase:全部字符转换为大写
(4)lowercase:全部字符转换为小写
6、text-decoration(文本装饰):设置文本的装饰效果
(1)none:没有装饰(正常文本的默认值)
(2)underline:下画线
(3)overline:上画线
(4)line-through:删除线
7、text-align(水平对齐方式):设置文本内容的水平对齐
(1)left:左对齐 (2)right:右对齐 (3)center:居中对齐
8、text-indent(首行缩进):设置首行文本的缩进(允许使用负值),属性值可以用不同单位的数值
(1)em:字符宽度的倍数 (2)%:相对于浏览器窗口宽度的百分比
9、white-space(空白符处理):设置空白符的处理方式
(1)normal:常规(默认值)，文本中的空格、空行无效，满行后自动换行
(2)pre:预格式化，按文档的书写格式保留空格、空行原样显示
(3)nowrap:空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出边界也不换行，若超出浏览器页面则自动增加滚动条
4、CSS样式高级特性
（1）标签指定式选择器
标签指定式选择器又称交集选择器，由两个选择器构成，第一个为标记选择器，第二个为class选择器或id选择器,两个选择器之间不能有空格
（2）后代选择器
后代选择器用来选择元素或元素组的后代，写法为把外层标记写在前面，内层标记写在后面，中间用空格隔开。只适用于嵌套情况。
（3）并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。
网页设计—CSS样式基础