CSS基础（一）

一、css简介

1.1css简介

css 层叠样式表，控制网页外观

1.2css三种引用方式

1.2.1外部样式表

在head标签中使用link

1.2.2内部样式表

放在style标签里

1.2.3内联样式表

放在标签style属性里

二、css选择器基础

2.1、元素的id和class

id属性赋予了标识页面元素的唯一身份

class允许重复

2.2、css选择器

一种选择元素的方式（把你想要的标签选中）

格式：

2.2.1、元素选择器

选中相同元素，设置同一个CSS

2.2.2、ID选择器

为元素设置ID，同一个页面不允许出现两个相同的ID

2.2.3、class选择器

类选择器，对相同或不同元素设置一个类名

2.2.4、子元素选择器

选中某一类元素下的子元素

2.2.5、相邻选择器

选中该元素的下一个兄弟元素，操作对象是该元素的同级元素

2.2.6、群组选择器

同时对几个选择器进行相同操作

二、字体样式

2.1、字体样式

常用属性

2.1.1、字体类型font-family

font-family：字体1，字体2，字体3；
按优先顺序排列

2.1.2、字体大小font-size

采用关键字

2.1.3、px单位

px：像素，一张图片中最小的点，计算机屏幕最小的点
px是一个相对单位，它是相对显示器屏幕分辨率而言的。例如Windows
系统的分辨率为每英寸96px, Mac系统的分辨率为每英寸72px。
还有百分比、em，初学者建议px

2.1.4、字体颜色color

语法：
color:颜色值;
说明：
颜色值是一个关键字或一个16进制的RGB值。
** 1. color属性使用关键字**
关键字指的就是颜色的英文名称，如red、blue、green等。
2. color属性使用16进制RGB

2.1.5、字体粗细font-weight

可以取100、200、…、900这个值。400相当
于正常字体normal, 700相当于bold。100〜900分别表示字体的粗细，是
对字体粗细的一种量化方式，值越大就表示越粗，值越小就表示越细

一般仅用到bold、normal这两个属性值，不建议使用
数值（100〜900 ）作为font-weight属性值

2.1.6字体斜体 font-style

italic是字体的一个属性，也就是说并非所有字体都有这个italic属性，对
于没有italic属性的字体，可以使用oblique将该字体进行倾斜设置。

2.2、CSS注释

语法：
/注释的内容/

如 果 对 某 一 个 元 素 先 后 都 定 义 了 同 一 个 属 性 ， 在 浏 览 器 中 以 " 后 定
义 的 那 个 属 性 值 ” 为 准

三、文本样式

3.1下划线、删除线和顶划线textdecoration

3.1.1text-decoration 属性

语法：
text-decoration:属性值;
说明:
text-decoration属性取值
在前端开发中，对于样式一般用CSS来定义，不建议使用标签来定义

用途分析
1.下划线
下划线在网页设计中，
一般用于文章的重点标明。
2.删除线
删除线出现在各大电商网站中，
一般用于促销。

3.2文本大小写 text-transform

3.3font-variant 属性

font-variant属性只有一个作用：把文本设置成小型大写字母

font-variant属性在英文国家还可能见得到，但是在我们中文网页中是极少
用到的。对于英文的大小写转换，我们用的是text-transform属性，而不是
用 font-variant 属性

3.4首行缩进 text-indent

语法：
text-indent:像素值;

text-indent的属性值应该是字体font-size属性值的两倍

3.5文本水平对齐text-align

语法：
text-align:属性值;

3.6行高 line-height

line-height指的是行高，而不是行间距

3.7字母间距letter-spacing和词间距

用letter-spacing属性定义字间距，使用wordspacing属性定义词间距。

语法：
letter-spacing:像素值;
’
说明：
letter,指的是"字母"的意思。letter-spacing属性用于定义"字母间距"。
letter-spacing属性我们几乎都用不上
语法：
word-spacing:像素值;

定义词间距，以空格为基准进行调节。如果多个单词被连在一起，则被word-spacing视为一个单词；如果汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

四、边框样式

任何块元素和行内元素都可以设置边框属性。
例如，div元素可以设置边框，img元素可以设置边框，table元素可以设
置边框，span元素同样也可以设置边框

4.1边框样式

4.1.1边框属性

1. border-width 属性
   语法：
   border-width:像素值;

2. border-style 属性
   borderstyle属性用于设置边框的外观，例如实线边框和虚线边框。
   语法：
   border-style:属性值;
   
   一般情况下，solid和dashed这两个属性值就够了

3. border-color 属性
   border-color属性用来定义边框的颜色。

简写：
border:lpx solid Red;

4.1.2局部边框

1.上边框 border-top
2.下边框 border-bottom
3.左边框 border-left
4.右边框 border-right

五、背景样式

CSS中，背景样式主要包括两种：背景颜色，以及背景图像

5.1 背景图像

语法：
background-image: url (” 图像 ”);
说明：
图像地址可以是相对地址，也可以是绝对地址。

5.1.1 背景重复样式 background-repeat

hr元素的border-color属性值为red,水平线的颜色就会改变
元素的宽或高必须大于背景图片本身的宽或高，才会有平铺效果。

5.2 背景颜色background-color

语法：
background-color:颜色值;
说明：
颜色值是一个关键字或一个16进制的RGB值。

5.3背景图像位置background-position

background-positon属性只能应用于块级元素和替换元素。其中替换元
素包括 img、input、textarea、select 和 object。
语法：
background-position:像素值 / 关键字；

“background-position : 12px 24px;”
表示背景图像距离该元素左上角的水平方向位置是12px，垂直方向位置是24px

5.4 background-attachment属性

scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动