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

今天要用一些特殊的方式来写笔记

CSS是什么？

CSS是用来定义页面元素的样式

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

CSS的基础代码框架：

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

其中，h1是选择器，用来选中页面中的一些元素，给这些元素定义样式；color，font-size是属性；write，14px是属性值；像color:write;这样的一行称为一条声明。

在页面中使用CSS

外链：将CSS定义放在一个单独的文件里，用link标签将其引入
嵌入：直接把相关代码嵌入html标签里
内联：在标签中加入style属性，把对于这个标签的样式直接写在这个标签的style属性里

完整页面实例：

CSS是如何工作的？

选择器Selector

选择器的作用是：找出页面中的元素，以便给他们设置样式。通常而言，我们可以使用多种方式选择元素：

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

1. 通配选择器

代码段：

<style>
    *{
        color:red;
        font-size:20px;
    }
</style>

样式：

2. 标签选择器

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

3. id选择器

当需要选定某些被赋予id属性的标签时，可使用id选择器

<style>
    #logo{
        color:red;
        font-size:20px;
    }
</style>
...
    <h1 id="logo">Web框架的架构模式探讨</h1>

4. 类选择器

给同一类标签设置样式，可用class这样一个选择器选取

5. 属性选择器

通过一些元素的属性或者属性值来选择该元素

通过属性：

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

通过属性值：

<style>
    input[type="password"]{
        border-color:red;
        color:red;
    }
</style>
...
    <label>用户名：</label>
    <input value="zhao" disabled />
    
    <label>密码：</label>
    <input value="123456" type="password" />

6. 其他用法

其中：

a[href^="#"]表示：a标签的href属性的值以#开始
a[href$=".jpg"]表示：a标签的href属性值以.jpg结束

Web入门3 | 青训营笔记