CSSpart1

一、语法规范

1.在head里书写

<style>

选择器{样式}

给谁修改样式{改什么样式}

</style>

二、CSS选择器

1.基础选择器

1.标签选择器

标签名 {

属性1：属性值1；

属性2：属性值2；

}

某一类整体修改

2.类选择器

（1）.类名（自己起的名字）{

属性1：属性值；

}

<div class = "red">变红色</div>

• 长名字或词组可以使用中横线
• 不要使用纯数字、中文等命名，尽量用英文

（2）多类名

多个类名写到一个class属性里，空格分开<div class = "red green">变红色</div>

• 把一些元素相同的样式放到一个类里面
• 这些标签都可以调用这个公共类，然后调用自己独有的类

3.id选择器

#id名{

属性1：属性值1；

}

只能调用一次，id不能重复

4.通配符选择器

* {

属性1：属性值1；

}

会修改html body div span li等所有的标签

2.复合选择器

三、CSS字体属性

1.字体系列

p{

font-family : 'Microsoft YaHei'；

• 各种字体之间必须使用英文逗号隔开
• 如果有空格隔开的多个单词（默认第一个 第一个没有用第二个显示..）组成的字体加引号，单双都行
• 'Microsoft YaHei'，tahoma，arial，'Hiragino Sans GB'

2.字体大小

p{

font-size: 20px；

}

• px（像素）是最常用的单位
• 谷歌浏览器默认文字大小为16px
• 可以给body统一指定大小
• 标题需要单独设置

3.字体粗细

p{

font-weight: bold；

}

属性值	描述
normal	默认值，不加粗
bold	定义粗体，加粗的
100~900	400=normal，700=bold，数字后面没有单位

4.文字样式

p{

font-style: normal；

}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

一般用在<em>（倾斜字体）让字体不倾斜

5.字体复合属性

body

{
font: font-style font-weight font-size/line-height font-family;

}

• 不能随意颠倒顺序
• 必须保留font-size和font-family，其他省略为默认

总结

属性	表示	注意点
font-size	字号	通常的单位是px像素，一定要加单位
font-family	字体	实际工作中按照团队约定写
font-weight	字体粗细	400=normal，700=bold，数字后面没有单位
font-style	字体样式	斜体italic，不斜体normal
font	字体连写	有顺序的；字号和字体必须同时出现

四、文本属性

1.颜色

表示	属性值
预定的颜色值	red，green，blue
十六进制	#ff0000，#ff6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

2.对齐文本

div{

text-align: center；

}

left/center/right 默认左对齐

3.装饰文本

div{

text-decoration: underline；

}

属性值	描述
none	默认，无装饰线，常用作取消下划线
underline	下划线，链接自带
overline	上划线
line-through	删除线

4.文本缩进

对首行进行缩进

div{

text-indent: 2em；

}

px也可以，2em是当前文字两个文字的距离

5.行间距（分为上间距和下间距）

div{

line-height：26px；

}

更改时文字高度不会改变，改变的上下间距的高度

总结

属性	表示	注意点
color	文本颜色	通常用十六进制
text-align	文本对齐
text-indent	文本缩进	常用于首行缩进两个字符，text-indent：2m
text-decoration	文本修饰	取消下划线none，加下划线underline
line-height	行高

五、CSS引入方式

1.行内样式表（行内式）

简单修改样式

<div style = "color: pink;"> </div>

• 控制当前的标签设置样式

2.内部样式表（嵌入式）

写到<style>中

• 理论上可以放到html文档的任何地方，一般放在head里
• 可以控制整个页面中的元素样式设置

3.外部样式表（链接式）

适合于样式比较多的情况，单独建一个CSS文件，在html中引入

<link rel = "stylesheet" href = "caa文件路径">

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结果和样式相分离	需要引入	最多，吐血推荐	控制多个页面