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

如何使用CSS

使用CSS有三种方式。
第一种行内样式，只对当前标签生效。
行内样式虽然直观易懂，但是不方便维护和修改，而且占内存。

<h1 style="height:20px; color:red"></h1>

第二种方法内链样式
在<head></head>内添加<style></style>来选择控制相应的内容

<html>
    <head>
        <title></title>
        <style type="text/css">
            p {
                color : red;
            }
        </style>
    </head>
    <body>
        <p>段落1</p>
    </body>
</html>

第三种就是外链样式外链样式就是通过HTML引入一个CSS文件，来改变当前文档的样式。你只需要在< html >文档< head >标签中引入下面一行代码就可以(推荐使用)

<link rel="stylesheet" type="text/css" href="index.css">

其中href的属性值就是当前CSS样式文件的文件路径

CSS的选择器

标签选择器

标签选择器指用HTML标签名作为选择器，按标签名分类这种方法能够快速为页面类型统一设置样式，但是不能设计差异化样式。

标签名{
    属性1:属性值;
    属性2:属性值;
    ...
}

类选择器

.red{
    color:red;
}
<p class="red">我是类选择器</p>

不能用标签做类名

id选择器

样式是通过#来定义的，只能调用一次

#id名{
     属性1:属性值;
     属性2:属性值;
}

通配符选择器

选取页面所有的标签

*{
    color:red;
}

复合选择器

后代选择器

后台选择器又称为包含选择器，可以选择父元素里面的子元素。

ul li{
    color:pink;
}

子选择器

子选择器只能选择为某一元素最近的一级子元素。

元素 > 元素2{
    样式声明
}
div > a{
    color:red;
}

并集选择器

并集选择器可以选择多组标签，同事为他们定义相同的样式。

div, p, h1{
    color:pink;
}

伪类选择器

选择器	功能
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接

focus伪类选择器

:focus伪类选择器用于选取获取焦点的表单元素

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ol>、<ul>等
独占一行
高度、宽度、外边距以及内边距都可以控制。

行内元素

常见的行内元素有<a>、<strong>、<b>、<i>、<span>等

默认宽度是它本身

浮动的相关知识

什么是浮动

float属性用于创建浮动框，将其移动到一边。

语法

float:属性值

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

理解CSS | 青训营笔记