CSS基础

夕暮寒露
156 阅读3分钟

CSS是什么

CSS 为 Cascading Style Sheets 的缩写，中文叫做 层叠样式表，用来控制HTML或XML的网页样式。主要设置网页的字体，颜色，边距，高度，宽度，背景图片，网页定位，浮动等。

CSS怎么用

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <h1>CSS标题</h1>
</body>
</html>

外部样式表

hello.html 链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS标题</h1>
</body>
</html>

style.css

h1{
    color: red;
}

hello.html 导入式（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        @import url("style.css");
    </style>
</head>
<body>
    <h1>CSS标题</h1>
</body>
</html>

内联样式（行内样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="color: red">CSS标题</h1>
</body>
</html>

优先级：就近原则，行内样式 > 内部样式 或 外部样式

CSS特点

  1. 结构和表现分离

  2. 可以实现 CSS 代码服复用

  3. 样式极其丰富

  4. 有利于SEO，容易被搜索引擎收录

CSS选择器

选择页面上某一个或某一类元素。

基本选择器

选择器优先级不遵循就近原则，id选择器 > 类选择器 > 标签选择器。

标签选择器

css代码中直接写 标签名{} ，标签选择器会选择页面上是这个标签的所有元素。

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS标题</h1>
    <h1>另一个标题</h1>
    <div>TestDIV</div>
</body>
</html>

style.css

h1{
    color: red;
}
div{
    background-color: darkseagreen;
}

类选择器

可以多个标签归为一类，css代码中写 .类名{} ，标签选择器会选择页面上 class="此类名" 的所有元素。

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS标题</h1>
    <h1>另一个标题</h1>
    <div>TestDIV</div>
    <div class="cc1">类选择器测试1</div>
    <div class="cc1">类选择器测试2</div>
    <div class="cc1">类选择器测试3</div>
    <p class="cc1">类选择器测试4</p>
</body>
</html>

style.css

h1{
    color: red;
}
div{
    background-color: darkseagreen;
}
.cc1{
    color: blue;
}

id选择器

一个标签指定唯一的id，css代码中写 #id名{} ，id选择器会选择页面上 id="此id名" 的元素。

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS标题</h1>
    <h1>另一个标题</h1>
    <div>TestDIV</div>
    <div class="cc1">类选择器测试1</div>
    <div class="cc1">类选择器测试2</div>
    <div class="cc1">类选择器测试3</div>
    <p class="cc1">类选择器测试4</p>
    <h2 id="ii1">id选择器测试1</h2>
    <h2 id="ii2">id选择器测试2</h2>
</body>
</html>

style.css

h1{
    color: red;
}
div{
    background-color: darkseagreen;
}
.cc1{
    color: blue;
}
#ii1{
    color: darksalmon;
}
#ii2{
    color: greenyellow;
}

层次选择器

后代选择器

body div{
    color: #341123;
}

子选择器

body>div{
    color: #341123;
}

兄弟（相邻）选择器

选择同级下面相邻的那一个元素

.caa+div{
    color: #341123;
}

通用选择器

选择同级下面的所有元素

.caa~div{
    color: #341123;
}

结构伪类选择器

通过 : 加一些伪类的参数来选择元素。

给超链接设置移入改变背景颜色样式。

a:hover{
    background: red;
}

选择 <ul></ul> 下面的第一个 <li></li> 元素。

ul li:first-child{
    color: #341123;
}

选择 <ul></ul> 下面的最后一个 <li></li> 元素。

ul li:last-child{
    color: #341123;
}

select2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2</title>
    <style>
        /*选择p元素的父元素的第2个子元素，不区分元素类型*/
        p:nth-child(2){
            background-color: aquamarine;
        }
        /*选择p元素的父元素的第2个p元素*/
        p:nth-of-type(2){
            background-color: blueviolet;
        }
        p:hover{
            background: red;
        }
    </style>
</head>
<body>
    <h1></h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

属性选择器

属性选择器将标签选择器和类选择器和id选择器结合，以 标签名[id|class|其他属性=""] 的语法精确选择元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select3</title>
    <style>
        .fa span{
            display: block;
            float: left;
            height: 60px;
            width: 60px;
            background-color: cornflowerblue;
            margin: 10px;
            text-align: center;
            border-radius: 6px;
            color: red;
            font: bold 30px/60px Arial;
        }

        /*选中10个span中存在id属性的元素*/
        span[id]{
            background-color: darkorchid;
        }

        /*选中id属性为sp1的元素*/
        span[id="sp1"]{
            background-color: lightgreen;
        }

        /*选中class中有cat的元素*/
        span[class*="cat"]{
            background-color: gold;
        }

        /*选中class中以f开头的元素*/
        span[class^="f"]{
            background-color: grey;
        }

        /*选中class中以n结尾的元素*/
        span[class$="n"]{
            background-color: darkblue;
        }
    </style>
</head>
<body>
    <div class="fa">
        <span id="sp1" class="pig black">1</span>
        <span class="cat black">2</span>
        <span class="dog black">3</span>
        <span class="cat brown">4</span>
        <span class="item black">5</span>
        <span class="cat black">6</span>
        <span class="cat black">7</span>
        <span class="fish black">8</span>
        <span class="cat white">9</span>
        <span class="cat black">10</span>
    </div>
</body>
</html>

CSS属性

字体类型： font-family: 黑体,serif;

字体大小： font-size: 40px;

字体粗细： font-weight: bold;

文本颜色： color: red; 或 color: #6478de; 或 color: rgb(223,45,66); 或 color: rgba(223,45,66,0.8);

文本对齐方式： text-align: center;

文本首行缩进： text-indent: 2em;

文本行高： line-height: 40px;

文本修饰： text-decoration: underline;

背景： background: red url("") 200px 10px no-repeat

CSS盒模型 定位 浮动

CSS发展史

CSS1.0

加粗字体

CSS2.0

提出 HTML 与 CSS 分离的思想，DIV+CSS，块+CSS，有利于SEO

CSS2.1

浮动，定位

CSS3.0

圆角边框，阴影，动画，浏览器兼容性

avatar
文章
阅读
粉丝