CSS 结构与样式相分离

CSS

结构与样式相分离

 

选择器以及一条或多条声明

每条声明（键值对）之后需要用分号；结尾

基础选择器分类：

1.标签选择器 <p> <div>等 用HTML标签名作为选择器

2.类选择器

通过class=类名 调用（类名过长的话可以用短横线-分隔）

多类名（便于复用）

Class=类名 类名 …

3.id选择器

通过id=id名 调用 （与类选择器调用一样）

？？？区别在于 -》》》》只能被调用一次！！！

4.通配符选择器

基础选择器总结

 

字体 font

font-family:指定字体系列

微软雅黑/’Microsoft YaHei’;宋体…

指定多种字体，逐个找，是否存在，如果找到则用改字体显示，否则用系统自带的字体显示

font-size:指定字体大小

特俗情况标题标签需要单独指定文字大小

全局指定文字大小Body{font-size:16px;}

font-weight:指定字体粗细

normal ：正常 ->400

bold：加粗，效果同strong

bolder：特粗体

lighter：细体

number：通过数字体现粗细--à

->700=bold

font-style：指定字体文字样式

normal：正常

italic：斜体=em

字体复合属性

顺序有要求，节约代码量；部分属性可以省略，但有的必须有

文本属性Text

Color：文本颜色

Text-align：对齐文本

只能设置水平对齐

Text-decoration：装饰文本

可以用于去除a（链接）默认的下划线text-decoration：none

Text-indent：文本缩进

段落文本缩进的效果Text-indent：20px;

Em单个字符的距离

Line-height：行间距（行高）

行高测量工具：FastStone

CSS引入方式

内部样式表：将样式写到HTML页面内部，放到style标签内部：个人感觉这种比较常见

行内样式表（内联样式表）：用于修改少量样式

外部样式表：单独建css文件，之后引入到HTML中：实际开发中最常见