CSS

2021-12-26 05:33:49

CSS

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

发展史

CSS1.0
CSS2.0：DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画……浏览器兼容性

基本入门

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 规范，<style>可以编写CSS的代码，每一个声明，最好使用分号结尾
     语法：
        选择器{
                声明1;
                声明2;
                声明3;
          }
        -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

分离，link获取(建议使用这种)

h1{
    color: red;
}

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

CSS的优势
1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分的丰富
4. 建议使用独立于html和css文件
5. 利于SEO，容易被搜索引擎收录！

CSS的三种导入方式

内部样式
外部样式
行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 内部样式 -->
    <style>
        h1{
            color: red;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 优先级：就近原则 -->
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: #1F87CC">我是标题</h1>
</body>
</html>

/*
外部样式
 */
h1{
    color: yellow;
}

拓展：外部样式两种写法

链接式

HTML

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css.css">

导入式

@import是CSS2.1特有！

<!-- 导入式 -->
    <style>
        @import "css.css";
    </style>

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器：选择一类标签标签{}

 /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #a13d30;
        }

类选择器class：选择所有class属性一致的标签，跨标签 .类名{}

/*类选择器的格式，.class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        .a1{
            color: #3cbda6;
        }
        .b2{
            color: #0D7114;
        }

id选择器：全局唯一！ #id名{}

 /* id选择器：id必须保证全局唯一！
        #id名称{}
        */
        #1{
            color: pink;
        }
        /*选择器优先级
        不遵循就近原则，固定的
        id选择器>类选择器>标签选择器
        */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="1">标题1</h1>
<h1 class="a1">标题2</h1>
<h1 class="b2">标题3</h1>
<p class="b2">标签</p>
</body>
</html>

优先级：id>class>标签

层次选择器

后代选择器：在某个元素的后面(祖爷爷-爷爷-父亲-儿子)，以空格表示

/*后代选择器*/
body p{
    background: pink;
}

子选择器：一代(儿子)，以>表示

/*子选择器*/
body>p{
    background: blue;
}

相邻兄弟选择器：只有一个，相邻向下(同辈)，以+表示

/*相邻兄弟选择器*/
.active+p{
    background: yellow;
}

通用兄弟选择器：当前选中元素的向下所有兄弟(同辈)，以~表示

/*通用兄弟选择器*/
.active~p{
    background:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
<p class="active">p7</p>
<p>p8</p>
</ul>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 避免使用class，id选择器 -->
    <style type="text/css">
        /*ul的第一个子元素*/
        ul li:first-child{
            background: rebeccapurple;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }
       /* 选择当前p元素的父元素,选择父级元素的第一个，并且是当前元素才生效*/
        p:nth-child(1){
            background: saddlebrown;
        }
        /* 选择当前p元素的父元素,选择父级元素的第二个当前元素*/
        p:nth-of-type(2){
            background: aqua;
        }
        
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #1F87CC;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值(正则)
        = 绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾*/
        /*存在id属性的元素a[]{}*/
        a[id]{
            background: yellow;
        }
        /*id=first的元素*/
        a[id=first]{
            background: green;
        }
        /*class中有links的元素*/
        a[class*=‘links‘]{
            background: red;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: blue;
        }
        a[href$=doc]{
            background: red;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://www.360.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item " >3</a>
    <a href="images/123.png" class="links item " >4</a>
    <a href="images/123.jpg" class="links item " >5</a>
    <a href="abc" class="links item " >6</a>
    <a href="/a.pdf" class="links item " >7</a>
    <a href="/abc.pdf" class="links item " >8</a>
    <a href="abc.doc" class="links item " >9</a>

码农公寓

CSS

什么是CSS

发展史

基本入门

CSS的三种导入方式

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器

相关文章