CSS语法格式

CSS语法

<选择器>

一、选择器

1. 作用：根据不同需求把不同的标签选出来

2. 分类：基础选择器与复合选择器

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

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

---

二、标签选择器

• 标签选择器是指使用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的css样式

p {
color: red;
}

三、类选择器

• 可以差异化的选择不同的标签，单独选择一个或某几个标签

  .red{
  color: red;
  }
  <ul>
      <li class="red">彭于晏</li>
      <li>刘德华</li>
      <li class="red">吴彦祖</li>
  </ul>
  
  

• 对同一个标签可以使用多类名方式，在标签class属性中写多个类名，类名之间必须用空格分开

  <div class="red font20">彭于晏</div>
  

• 使用场景：将相同的代码放到一个类中去调用

四、id选择器

• 与类选择器使用方法类似，但是id选择器只能调用一次,并且一个标签不能调用多个id选择器

  #red {
  	color: red;
  }
  <div id="red"> 彭于晏 </div>
  

五、通配符选择器

• 使用 * 定义，表示选取页面所有标签，无需调用

---

<字体属性>

一、字体系列

1. 使用 font-family 定义文本的字体系列

P {
font-family: "微软雅黑"
}

• 各个不同的字体之间需要用逗号隔开，一般使用多个字体的作用是为了提高代码在不同设备上的兼容性。

2. 使用 font-size 定义字体大小

body{
font-size： 16px;
}

• 标题标签需要单独指定文字大小

3. 使用 font-weight 设置文字粗细

p{
/*normal 默认值不加粗 bold 加粗 100-900 自定义*/
font-weight: 400;
}

• 不需要加px单位

4. 使用 font-style 设置文本风格

p{
/*normal 默认正常样式  italic 斜体*/
font-style: italic;
}

5. 复合属性的使用

p{
font: font-style font-weight font-size/height font-family
}

• 使用font属性时必须按照以上格式顺序书写，并且每个属性之间用空格隔开
• 不需要的属性可以省略，但是font-style和font-family属性必须保留，否则font属性则不起作用

---

<文本属性>

一、文本外观

1. 文本颜色：color属性定义

div{
color: red;
}

• 开发中颜色常用的表示为16进制

2. 对齐文本：text-align

div{
/*left 默认左对齐  right 右对齐  center 居中对齐*/
text-align: center;
}

3. 装饰文本：text-decoration 可以给文本添加上下中划线

div{
/*none 默认没有线  underline 下划线(链接a自带下划线)  overline 上划线  line-through 删除线 */
text-decoration: uderline;
}

4. 文本缩进：text-indent 用于指定文本第一行的缩进，通常是段落首行缩进

div{
/*固定缩进10个像素*/
text-indent: 10px;
/*不管字体大小，缩进2个文字的大小*/
text-indent: 2em;
}

5. 行间距：line-height 用于设置行高

p{
line-height: 26px;
}

---

<引入方式>

一、 内部方式

二、行内样式

三、外部样式

---

<Emmt语法>

1. 使用缩写来提高html / css 的编写速度

---

<复合选择器>

一、后代选择器

1. 又称为包含选择器，可以选择父元素里面子元素，就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代

/*选择ul里面所有的li标签元素*/
ui li{
样式声明
}

• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子也可以是孙子，只要是元素1的后代即可
• 元素1与2可以是任意基础选择器

二、子选择器

1.只能选择作为某一元素最近一级的子元素

/*选择div里面所有最近一级的p标签*/
div>p{
样式声明
}

• 元素1与元素2之间使用>号隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2必须是最近的一级，在父元素其他标签包含中的同样元素都不可被选

三、并集选择器

1. 可以同时选择多组标签，为他们定义相同的样式

ul,div,.red{ 样式声明}

四、伪类选择器

1. 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果

2. 用法 ：在选定的标签后加 ：

3. 

   • 为了确保生效，须按照 :link - :visited - :hover - :active 顺序声明
   • 因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独制定样式

五、focus伪类选择器

1. 用于选取获得焦点的表单元素
2. 焦点就是光标，一般情况下 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
3. input:focus 用于选取到光标选到的文本框

input:focus{
background-color: yellow;
}