走进CSS|青训营笔记

颐灏
200 阅读3分钟

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

CSS

上一篇笔记我们一起学习了HTML，也就是结构，下面让我们一起走近表现CSS吧，一起领略它独特的魅力吧。

一、CSS是什么

  • 是一种先选择HTML元素，然后设定选中元素CSS属性的机制。

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

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

  • 基本语法

<style>
        选择器{
            color: aqua;
        }
</style>

  • 语法 ： 选择器 {

    声明1；

    声明2；

    }

  • style标签

    在html内部使用css样式时用style标签

二、页面内引入css的方法

  • 外链
<!-- 链接式引用 -->
<link rel="stylesheet" href="外部引用.css" type="text/css">

  • 嵌入（内部）

    <style>
        P{
            color: aqua;
        }
 </style>

  • 内联（行内样式）

  <!-- 行内样式 -->
   <h1 style="color: red;">HELLO WORLD</h1>
  • css样式优先级

行内样式 > 内部样式

同时多种方式引入后服从就近原则 ，越接近标签的样式优先级别越高

三、CSS工作方式

image.png

  • 元素和属性都写在html文档中，后来才把属性提取出来做为样式，属性就这样分离成为独立的东西(也就是样式)，而浏览器在显示前会把HTML 和 CSS 转化成 DOM （文档对象模型），文档对象模型最后通过javaScrip的逻辑实现网页的交互和动态显示。

  • 选择器Selector：找出页面中的元素,以便给他们设置样式使用多种方式选择元素

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

CSS的基本选择器

标签选择器

  • <style>
        P{
            color: aqua;
        }
 </style>
  • 将html标签作为选择器

类选择器

  • /* 类选择器 */
        .address{
            color: rgb(9, 86, 60);
        }
  • . 类名
  • 需要为标签设定class属性，相同class名称都会被样式修改。
  • 常用于 一组标签修改样式

id选择器

  • /* id选择器 */
#play{
   color: rgb(226, 38, 0);
}
  • #id
  • id名称 设定全局唯一 需要为标签设定id属性
  • 常用于为某一个标签设定独立样式时使用。

当同时使用时，优先级别：id选择器>类选择器>标签选择器，不遵循就近原则

通配选择器

 *{
            background-color: blue;
        }
  • 通配符*代表全体元素

属性选择器

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

  • disabled是input属性，禁用属性，为它设置样式

  • 属性值进行匹配

image.png

  • a标签的那个以“#”开头的将会被匹配
  • 以“$”为结尾的将会被匹配其样式

伪类

  • 状态伪类

该元素与用户的交互过程中呈现出不同的状态

a:visited{
  color:gray;
}

  • 结构伪类

    给DOM结点特点的元素设置样式

     /* 匹配第一个p元素 */
        p:first-child{
            color: red;
        }

组合

image.png

选择器组

一群元素设置相同的样式，各个元素通过逗号隔开

颜色

  • Hue(色相)

    如红色、黄色等

取值范围：0~360

  • Saturation（饱和度）

    色彩的鲜艳程度

    取值范围0~100%

  • Lightness(亮度)

    取值范围：0~100%

  • alpha(透明度)

    取值范围（0~1）

    0是对图片没有影响，1的时候红色将覆盖背景

三、文本样式

  • 通用字体族

    设置多种属性

    英文字体放在中文字体之前，避免整个中英文都被中文格式覆盖

  • 字体 font-family: "楷体";

    • 字体大小 font-size: 50px;
    • 字体样式 font-style: italic;
    • 字体加粗 font-weight: bold;
  • 文本对齐方式：
 .date{
            text-align: right;
        }
  • 移除链接下划线
 a{
            text-decoration: none;
        }
  • 文本缩进样式
 .indent{
            text-indent: 2%;
        }

样式优先级

样式应用优先级：

  • 行内样式->用户自定义样式->浏览器定义的样式->继承的样式
  • 样式选择器的优先级： “ICE”公式计算权重,I=ID,C=类，E=元素
  • !important 是样式应用优先级提权

    希望大家每天都有进步，都有所得，同时你们的点赞和评论就是最好的支持
avatar
文章
阅读
粉丝