走进前端技术栈CSS | 青训营

CSS是什么？ （Cascading Style Sheets）

用来定义页面元素的样式

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

这是一个CSS框架，其中对应的含义如下

row1：选择器selector

row2：选择器property+属性值value

row3：声明declaration

 h1{
     color:white;
     font-size:14px;
 }

在页面中使用CSS的三种办法：外链，嵌入，内联

 <!-- 外链 -->
 <link rel="stylesheet" href="/1.css">
 ​
 <!-- 嵌入 -->
 <style>
     li{margin: 0;list-style: none;}
     p{margin: 1em 0;}
 </style>
 ​
 <!-- 内联 -->
 <p style="margin: 1em 0">Example Content</p>

CSS是如何工作的？

选择器selector

• 找出页面中的元素，以便给他们设置样式

• 使用多种方式选择元素

  • 按照标签名、类名或id
  • 按照属性
  • 按照DOM树中的位置

通配选择器

结构：*{css属性名:属性值;}

作用：找到页面中所有的标签，设置样式，使页面所有标签都满足属性

注意：

1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding

标签选择器

结构：标签名{css属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意：

1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

id选择器

#+id 唯一 结构：#id属性值{css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签

类选择器

结构：.类名{css属性名:属性值;}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意：

1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开即可
4. 类名可以重复，一个类选择器可以同时选中多个标签

属性选择器

 <label>用户名：</label>
 <input value="yuki" disabled>
 ​
 <label>密码：</label>
 <input value="123456" type="password">
 ​
 <style>
     [disabled]{
         background-color: #eee;
         color: #999;
     }
 </style>

 <p>
     <label for="">密码：</label>
     <input type="password" value="123456">
 </p>
 ​
 <style>
     input[type="password"]{
         border-color: red;
         color: red;
     }
 </style>

a[href ^="#"]：a标签的href如果以"#"开头，则匹配

a[href $=".jpg"]：a标签的href以".jpg"结尾

 <p><a href="#top">回到顶部</a></p>
 <p><a href="图片路径">查看图片</a></p>
 ​
 <style>
   a[href^="#"] {
     color: #f54767;
     background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
     padding-left: 1.1em;
   }
  
   a[href$=".png"] {
     color: deepskyblue;
     background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
     padding-left: 1.2em;
   }
 </style>

伪类pseudo-classes

• 不基于标签和属性定位元素

• 几种伪类

  • 状态伪类
  • 结构性伪类

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover { css }

注意点：

• 伪类选择器选中的元素的某种状态

组合combinators

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

 <article>
     <h1>拉森火山国家公园</h1>
     <p>拉森火山国家公园是位于...</p>
     <section>
       <h2>气候</h2>
       <p>因为拉森火山国家公园...</p>
       <p>高于这个高度，气候非常寒冷...</p>
     </section>
   </article>
   
   <style>
     /* 子孙p */
     article p {
       color: black;
     }
 ​
     /* 子元素p */
     article > p {
       color: blue;
     }
 ​
     /* 紧跟其后的第一个p */
     h2 + p {
       color: red; 
     }
   </style>

选择器组

用逗号隔开

 body,h1,h2,h3,h4,h5,h6,ul,ol,li{
     margin:0;
     padding:0;
 }
 ​
 [type="checkbox"],[type="radio"]{
     box-sizing:border-box;
     padding:0;
 }

颜色表示

1. rgb（Red-Green-Blue）颜色表示 #111111（每两位表示红绿蓝的值，范围0~255，16进制表示）或者 rgb(255,255,255)

2. hsl（Hue-Saturation-Lightness）

   色相（H）是色彩的基本属性，如红色、黄色等；取值范围是0~360

   饱和度（S）是指色彩的鲜艳程度，越高越鲜艳；取值范围0~100%

   亮度（L）指颜色的明亮程度；越高颜色越亮；取值范围是0~100%

3. a（alpha）透明度，一般在前两种颜色表示方法中做第4个属性，取值范围0~1，0代表透明，1代表不透明

font属性

font-family字体类型

通用字体族

• Serif衬线体：Georgia、宋体
• Sans-Serif无衬线体：Arial、Helvetica、黑体、微软雅黑
• Cursive手写体：Caflisch Script、楷体
• Fantasy：Comic Sans MS、Papyrus
• Monospace等宽字体：Consolas、Courier、中文字体

font-family使用建议

• 字体列表最后写上通用字体族
• 英文字体放在中文字体前面

 <h1>1</h1>
 <p>p</p>
 ​
 <style>
     h1{
         font-family: Optima,Georgia,serif;
     }
     body{
         font-family:Helvetica, sans-serif;
     }
 </style>

还可以使用Web Fonts，可能不兼容

font-size字体大小

• 关键字

  • small、medium、large

• 长度

  • px、em

• 百分数

  • 相对于父元素字体大小

 <section>
     <h2>A web font example</h2>
     <p class="note">Notes: Web fonts ...</p>
     <p>With this in mind, let's build...</p>
   </section>
 ​
   <style>
     section{
         font-size: 20px;
     }
 ​
     section h1{
         font-size: 2em;
     }
     section .note{
         font-size: 80%;
         color: orange;
     }
   </style>

字重取值范围100~900：一般情况，字重默认是400，加粗是700

font-weight:值

font属性连写

取值：font:style weight size/height family;

省略要求：只能省略前两个，如果省略了相当于设置了默认值

 font:style weight size family;
 可以省略前两个写成
 font:100px 微软雅黑;(font:size family;)
 不可以写成
 font:family;

注意：如果需要同时设置单独和连写形式，

要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面

文本样式

text-align文本水平对齐方式

属性值
left	左对齐
center	居中对齐
right	右对齐

注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

text-indent文本缩进

• 数字+px
• 数字+em（推荐1em=当前标签的font-size的大小）

text-decoration文本修饰

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

注意：开发中会使用 text-decoration：none；清除a标签（超链接）默认的下划线

行高line-height

作用：控制一行的上下间距 属性名：line-height

• 数字+px
• 倍数（当前标签font-size的倍数）

应用：

1. 让单行文本垂直居中可以设置line-height:文字父元素高度
2. 网页精准布局时，会设置line-height:1可以取消上下间距

行高与font连写的注意点：

• 如果同时设置了行高和font连写，注意覆盖问题
• font:style weight size/line-height family