CSS

CSS语法规范：

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象的具体样式
• 属性与属性值以“键值对”的形式出现
• 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
• 属性和属性值之间用英文：分开
• 多个“键值对”之间用英文：进行区分

CSS代码风格：

书写格式：

• 1. 紧凑格式

  
  h3 {color:red; font-size:20px;}
  
  

• 2. 展开格式：

  h3 {
      color:red;
      font-size:20px;
  }
  

样式大小写：

h3 {
    color:red;
}

H3 {
    COLOR:RED;
}

空格规范：

h3 {
   color:red;
}

• 1.属性值前面，冒号后面，保留一个空格
• 选择器和大括号中间保留空格

基础选择器：

标签选择器：

标签名 {
    属性1：属性值1；
    属性2：属性值2；
    ···
}

类选择器：class

• 1. 类选择器使用'.'进行标识，后面紧跟类名
• 2. 可以理解为给这个标签起了个一个名字来表示
• 3. 长名称或词组可以使用中横线来为选择器命名
• 4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
• 5. 命名要有意义

.类名{
    属性1：属性值1；
}

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

类选择器-多类名：

<div class="red font20">某某</div>

• 1. 在标签class属性中写多个类名
• 2. 多个类名中间必须用空格分开
• 3. 这个标签就可以分别具有这些类名的样式

多类名开发使用场景：

• 1. 可以吧一些标签元素相同的样式放到一个类里面
• 2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
• 3. 从而节省CSS代码，统一修改也非常方便

ID选择器：

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名{
    属性1：属性值1；
    ...
}

• 1. id选择器只能被调用一次

通配符选择器：

使用*来定义，他表示选取页面中所有元素(标签)

*{
    属性1：属性值1；
    ...
}

• 通配符不需要调用，自动给所有元素使用样式

CSS字体属性：

• p { font-family:"微软雅黑"；} 此处推荐：font-famiy:"Microsoft YaHei
• 1. 可以用多字体，需用","隔开
• 2. 尽量使用默认字体
• 3. 最常见字体：Microsoft YaHei,tahoma,arial,Hiragino Sans GB

字体大小：

p{
    font-size:20px;
}

• px大小是我们网页最常用的单位
• 谷歌浏览器默认大小为16px
• 不同浏览器默认显示字号不一致，尽量给一个明确值大小
• 可以给body指定整个页面文字大小

文字粗细：

p{
    font-weight:700;
}

提倡使用数字表示加粗变细

属性值	描述
normal	默认值(不加粗的)
bold	定义粗体(加粗的)
100-900	400等同于normal，700等同于bold，数字后面不跟单位

文字样式：

p{
    font-style:normal;
}

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

字体复合属性：

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

• 顺序不能打乱
• 不需要设置的属性可以省略，但必须保留font-size和font-family属性

字体属性总结：

属性	表示	注意点
font-size	字号	通常用单位px
font-family	字体	实际按约定来写字体
font-weight	字体粗细	加粗是700或bold 不加粗是400或normal
font-style	字体样式	倾斜是italic 不倾斜是normal
font	字体连写	连写有顺序，不能随意更改，字号和字体必须出现

CSS文本属性：

文本颜色：

• 用color表示

表示表示	属性值
预定义的颜色值	red,green,biue
十六进制	#ff0000,#ff6600,#29d794
RGB代码	rgb(255.0.0)或rgb(100%,0%,0%)

对齐文本：

• text-align属性用于设置文本内容的水平方式

p{
    text-align:center;
}

属性值	解释
left	左对齐(默认值)
right	右对齐
center	居中对齐

装饰文本：

• text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等

属性值	解释
none	默认，没有装饰线
underline	下划线，链接a自带下划线(常用)
overline	上划线(几乎不用)
line-through	删除线(不常用)

文本缩进：

• text-indent属性用来指定文本的第一行的缩进
• em是一个相对单位，是当前元素一个文字的大小

div{
    text-indent:5em;
}

行间距：

• line-height用于设置行间的距离

p{
    line-height:20px;
}

CSS的引入方式：

行内样式表(行内式)：

<p style="color:red; font-size:12px;">某某</p>

• 1. style其实就是标签的属性
• 2. 在双引号中间，写法要符合CSS规范
• 3. 可以控制当前的标签设置样式
• 4. 书写繁琐，不推荐大量使用，只对当前元素添加简单样式时可以考虑使用

内部样式表(嵌入式)：

• 将所有CSS代码抽取出来，单独放到一个<style>标签中

<style>
    div{
        color:red;
        font-size:12px;
    }
    </style>

• 1. <style>标签可以放在html文档任何地方，但一般会放在文档的标签中
• 2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置
• 3. 代码结构清晰，但是并没有实现结构与样式完全分离
• 4. 使用内部样式表设定CSS，通常用于练习

外部样式表(链接式)：

• 单独写入CSS文件中，之后引入html文件中

引入外部样式表分两步：

• 1. 新建一个后缀名为CSS的样式文件，把所有CSS代码都放入此文件中
• 2. 在html页面中，使用标签引入这个文件

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

• rel:定义当前文档与被连接文档之间的关系，在这里需要指定为stylesheet，表示被连接文档是一个样式文件
• href：定义所链接外部样式表文件的URL，可以使相对路径，也可以是绝对路径