CSS(Cascading Style Sheets)|青训营笔记

Sirarm
104 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天

3.1 CSS介绍

  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

  • 用来定义页面元素的样式

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

3.2 CSS语法

image.png

3.3 CSS的使用方法

 <!-- 外链，推荐使用的方法-->
 <link rel="stylesheet" href="/assets/style.css">
 <!-- 嵌入 -->
 <style>
   li { margin: 0; list-style: none; }
   p { margin: 1em 0; }
 </style>
 <!-- 内联 -->
 <p style="margin:1em 0">Example Content</p>

3.4 CSS如何工作

image.png

3.5 选择器 Selector

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

  • 使用多种方式选择元素

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

3.5.1 通配选择器

  • 通配选择器是使用“*”号
 *{
     
 }

​

This is heading

this is some paragraph

​

3.5.2 标签选择器

  • 使用标签选中
  <h1>
         This is heading
     </h1>
     <p>
        this is some paragraph
     </p>
     <style>
         h1{
            color : orange;
         }
         p{
             font-size :20px;
         }
     </style>

3.5.3 id选择器

 <h1 id="logo">
     HTML5文档
 </h1>
 <style>
     #logo{
         
     }
 </style>

3.5.4 类选择器

 <h2>
     ToDO List
 </h2>
 <ul>
     <li class = "done">Learn HTML</li>
     <li class = "done">Learn Css</li>
     <li>Learn Javascript</li>
 </ul>
 <style>
     .done{
         color: gray;
         text-decration: line-through;
     }
 </style>

3.5.5 属性选择器

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

标签[属性(=“属性值”)]来选择

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

 <p><a href="#top">回到顶部</a></p>
 <p><a href="a.jpg">查看图片</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$=".jpg"] {
     color: deepskyblue;
     background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
     padding-left: 1.2em;
   }
 </style>

3.5.6 伪类

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

  • 几种伪类

    • 状态伪类
    • 结构性伪类
 <a href="http://example.com">
   example.com
 </a>
 ​
 <label>
   用户名：
   <input type="text">
 </label>
 ​
 <style>
 a:link {
   color: black;
 }
 ​
 a:visited {
   color: gray;
 }
 ​
 a:hover {
   color: orange;
 }
 ​
 a:active {
   color: red;
 }
 <!--选中聚焦-->
 :focus {
   outline: 2px solid orange;
 }
 </style>

 <ol>
   <li>阿凡达</li>
   <li>泰坦尼克号</li>
   <li>星球大战：原力觉醒</li>
   <li>复仇者联盟 3</li>
   <li>侏罗纪世界</li>
 </ol>
 ​
 <style>
 li {
   list-style-position: inside;
   border-bottom: 1px solid;
   padding: 0.5em
 }
 ​
 li:first-child {
   color: coral
 }
 ​
 li:last-child {
   border-bottom: none;
 }
 </style>

3.5.7 各种选择器的组合

  • 在实际使用中常常将各种选择器组合在一起约束选择，是的样式选择更加精准

  • 组合方法

    • 名称语法说明示例
      直接组合AB满足A同时满足Binput: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

3.5.8 选择器组

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

3.6 颜色

3.6.1 RGB

  • #5a6b89#号后跟这三组16进制数
  • rgb(90,107,137) rgb括号内三组十进制数（0-255），表示红绿蓝的值

3.6.2 HSL（Hue Saturation Lightness）

  • Hue：色相(H)是色彩的基本属性, 如红色、黄色等; 取值范围是0-360。

  • Saturation ：饱和度(S)是指色彩的鲜艳程度，越高约鲜艳；取值范围0-100%。

  • Lightness ：亮度(L)指颜色的明亮程度；越高颜色越亮；取值范围是0-100%。

  • 表示方法

    • hsl（0,100%，50%）

3.6.3 不透明度alpha

  • 使用方法

    • #ff0000ff=
    • rgba(255, 0, 0,1)
    • hsla(0, 100%, 50%, 1)

3.7 字体

3.7.1 设置属性名：font-family

  • 设置多个字体时，从前往后匹配

3.7.2 通用字体族

  • Serif 衬线体

    • Georgia 、宋体

  • Sans-Serif 无衬线体

    • Arial、Helvetiac、黑体、微软雅黑

  • Cursive 手写体

    • Caflisch、楷体

  • Fantasy

    • Comic Sans Ms 、papyrus 、Zapfino

  • Monospace 等宽字体

    • Consolas 、Courier 、中文字体

3.7.3使用建议

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

3.7.4 Web Fonts

  • @font-face{ }引用方式已用web上字体，使用时下载
 <h1>Web fonts are awesome!</h1>
 <style>
   @font-face {
     font-family: "Megrim";
     src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
   }
 ​
   h1 {
     font-family: Megrim, Cursive;
   }
 </style>

3.7.5 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>

3.7.6 字重 font-weight

  • 范围是100-900
  • 需要自己本身支持无级字重

3.7.7 line-height

  • 两行基准线的距离

image.png

3.7.8 text-align

  • 文本对齐方式：

    • left左对齐
    • center居中
    • right右对齐
    • justify两端对齐

3.7.9 spacing

  • 字内间距，letter-spacing
  • 字间间距，word-spacing

3.7.10 text-indent

  • 首行缩进

3.7.11 text-decoration

  • none 无划线
  • underline下划线
  • line-through删除线
  • overline上划线

3.7.12 white-space

换行和空格符的控制

  • normal 多空格合并
  • nowrap 强制不换行
  • pre 保留所有
  • pre-wrap 保留空格（一行内显示不下自动换行）
  • pre-line 合并空格，保留换行

3.8 CSS的调试

  • 右键点击页面，选择「检查」

  • 使用 快捷键

    • Ctrl + Shift +I

3.9 选择器优先级（特异度）

选择越精确，优先级越高。

3.10 继承

  • 某些属性会自动继承其父元素的计算值，除非显示指定一个值；一般地，与文字相关的属性是可以继承的，与盒模型相关的内容无法继承。
  • 对于与盒模型相关的属性需要其继承父级属性设置，使用inherit设置进行继承。

3.11 初始值

  • CSS 中，每个属性都有一个初始值

    • background-color 的初始值为 transparent
    • margin-left 的初始值为 0

  • 可以使用 initial 关键字显式重置为初始值

    • background-color: initial
avatar
文章
阅读
粉丝