css第一天

1. CSS的主要有两个部分组成：选择器+一个或多条声明

选择器适用于CSS样式的HTML标签；

属性与属性值以“键值对”的形式出现；

CSS在<style>下面写

2. 选择器的分类

• 选择器分为基础选择器和复合选择器

• 基础选择器是由单个选择器组成的；

• 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器；

a.标签选择器是指HTML标签名称，能快速为页面中的同类型的标签统一设置样式；

b.类选择器可以单独或者某几个标签使用；类选择器口诀：样式点定义 ， 结构（class）调用 ，一个或多个， 开发最常用

使用：类名不能与标签名一样；长名称或词组可以使用中横线为选择器命名；不要使用纯数字、中文等命名，尽量使用英文字母来表示。

.类名{

属性1：属性值1

}

语法：需要用class属性或者<div class='red'>变红色</div>

多类名使用：

<div class="red font20">亚瑟</div>

ps:多个类名中间必须用空格分开

使用场景：在共同样式放在一个类名中

c.id选择器

#id名{

属性1：属性值1；

}

id选择器和类选择器的区别：

类选择器可以多个类名，id选择器只用一个；最大的不同在于使用的次数，类选择器在修改样式上使用最多，id选择器一般用于页面唯一性元素，与js搭配使用

d.通配符选择器

*{

属性1：属性值1；

}

ps:不需要特别调用，自动就给所有元素使用样式

3. css字体属性

a.字体系列-font-family

p{

font-family:'宋体'

}

ps:各种字体之前用英文状态下逗号隔开

一般情况下有空格隔开的多个单词组成的字体，加上引号

b.字体大小-font-size

p{

font-size:20px;

}

ps:px是像素的常用单位

标题标签比较特殊需要单独指定大小

c.字体加粗-font-weight

p{

font-weight:bold;

}

normal:正常字体 相当于400

bold:粗体或者700

bolder:特粗体

lighter:细体

number:加数字

d.文字样式-font-style

p{

font-style:normal;

}

nomal:默认值，浏览器会显示标准的字体样式 font-style:normal

italic:浏览器会显示斜体的字体样式

ps:平时我们很少给文字加斜体，反而要给斜体标签（em,i）改为不倾斜字体

e.字体复合属性

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

ps:不能调换顺序，必须要有空格隔开;

必须保留font-size和font-family属性

4. 文本属性

a.文本颜色

div{

color:deeppink;

}

b.对齐文本

div{

text-align:center;

}

left:左对齐

right:右对齐

center:居中对齐

c.文本装饰

div{

text-decoration:underline;

}

none:默认没有装饰线

underline:下划线

overline:上划线

line-through:删除线

d.文本缩进

div{

text-indent:10px;

}

em是一个相对单位，就是当前元素1个文字大小。

e.行间距

p{

line-height:29px;

}

5. css的三种样式表

a.行内样式表

修改简单样式

<div style="clolor:red;font-size:12px;">青春不常在</div>

ps:style是标签属性

要在双引号中间，可以控制当前的标签设置样式

b.内部样式表

div{

color:pink;

}

在style中写，一般来说我们都把style可以任何地方，为了方便写在head中

c.外部样式表

修改样式比较多的

div{

color:pink;

}