css基础

1.css的属性

1.background

css的background的定义和用法：background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：

css样式规则

注意：1.选择器用于指定css样式作用的html对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以”键值对“的形式出现。

3.属性是对指定的对象设置的样式属性，例如，字体大小，文本颜色等；

4.属性和属性值之间用英文” ： “连接；

2.css基础选择器

标签选择器（元素选择器）

：是指用html标签名称作为选择器，按标签名称分类；

基本语法为：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；...}或者
元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；...}

优点为：能够快速为页面中同类型的标签统一样式

缺点为：不能设计差异化样式；

类选择器

类选择器使用“ . ”（英文点号）进行标识，后面紧跟类名

基本语法为：
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；…}
标签调用的时候用class=“类名”

类选择器最大优势是可以为元素对象单独或相同的样式.

3.css基础选择器

1.多类名选择器

语法:

.类名1 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}
.类名2 {属性4:属性值4; 属性5:属性值5; 属性6:属性值6; ......}
标签调用的时候用： class = "类名1 类名2"

注意:
1)样式显示效果跟HTML元素中的类名先后顺序没有关系,爱CSS样式书写的上下顺序有关.
2)各个类名中间用空格隔开.
多类名选择器在后期布局比较复杂的情况下,还是较多使用的.

2.ID选择器和通配符选择器

id选择器

id选择器使用“#”进行标识，后面紧跟id名，

基本语法为：

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3}

​ 该语法中，id名即为html元素的属性值，大多数html元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个。

ps：W3C标准规定，在同一个页面内，不允许有相同的id对象出现，但是允许相同名字的class。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，其基本语法格式如下：

*{属性1：属性值1；属性2：属性值2；属性3：属性值3}

所有选择器的权重：

第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。
特殊:!important权重最高
!important>内联>ID选择器>类选择器>标签选择器

3.css字体样式属性

1.font-size:用于设置字号大小，该属性的值可以使用相对长度单位，也可以使用绝对单位长度。

2.font-family :该属性用于设置字体，网页中常用的字体有宋体，微软雅黑等等。例 css样式代码如：

p{font-family=“微软雅黑”；}

3.font-weight:字体粗细；字体加粗除了用b和strong标签之外，可以用css来实现；

font-weight：属性值；可用属性值有：normal（正常），bold（粗体），bolder（特粗），lighter（细体），100~900（100的整数倍）

ps：400等价于normal，700等价于bold；

4.font-style：字体风格；字体倾斜除了用i和em标签之外，可以使用css来实现，但是css是没有语义的；

font-style可用属性值如下：

normal：默认值

italic：斜体；

oblique：倾斜；

5.font：综合设置字体样式；其基本语法为；

选择器{font：font-style  font-weight	font-size/line-height	font-family}

注意：使用font属性时，必须按上面语法格式的顺序书写，不能更换顺序，各个属性以空格隔开

4.css外观属性

1.color：文本颜色

color属性用于定义文本颜色，其取值方式有3种：

1.预定义的颜色值：如red green，blue等；

2.十六进制，如#FF0000,#FF6600.#29D794等，实际工作中，十六进制是最常用的定义颜色方法

3.rgb代码，如红色可表示为rgb（255，0，0）,需注意，如果使用rgb代码的百分比颜色值，取值为0时也不能省略百分号。

2.line-height:行间距

Line-height属性用于设置行间距，行与行之间的距离；

3.Text-align:水平对齐方式

用于设置文本内容的水平对齐，相当于html中align对齐属性:left|、rgiht、center

4.text-indent:首行缩进

用于设置首航文本的缩进，可以为不同的单位的数值，em字符宽度的倍数，或相对于浏览器窗口宽度的百分比

5.text-decoration:文本的装饰

None(默认)、underline(文本下划线)、overline(上划线)、line-through(穿过文本的一条线，删除线)

5.后代与子代选择器

后代选择器又指包含选择器，用于选择元素或者元素组的后代，把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为了外层标签的后代。

后代选择器:用空格隔开，选取子孙后代的;

子代选择器：用>隔开，选取亲儿子;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p5ydu7VB-1646014042467)(file:///C:\Users\29802\AppData\Local\Temp\ksohtml\wpsCF67.tmp.jpg)]

6伪类选择器

链接伪类选择器:

:link /未访问的链接/

:visited /已访问的链接/

:Hover /鼠标移动到链接上/

:active /选定的链接/

注意写的时候 顺序尽量不要颠倒，按照lvha的顺序.

7.块级元素

每个块级元素通常都会独自占据一行或者多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块级元素:<h1>~<h6>、<p>、<div>  <ol>  <ul>  <li>等，特点为
    1.总是从新行开始
    2.高度行高，外边距以及内边距都可以控制
    3.可以容纳内联元素和其他块元素
    

常见的行内元素:<a>  <strong>  <em>  <i>  <del>  <s>  <ins>  <u>  <span>等
    特点为：
    1.和相邻行内元素在一行上
    2.高宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
    3.行内元素只能容纳文本或其他行内元素（a特殊）

行内块元素:<img>  <input>  <td> 

8.标签显示模式转换display

块转行内:display:inline;

行内转块:display:block；

块，行内元素转换为行内块：display：inline-block；