CSS学习笔记第一课

原创已于 2022-04-18 17:42:52 修改 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #css

于 2022-04-18 17:41:18 首次发布

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括其定义、发展历史、优势和导入方式。详细讲解了CSS选择器的种类，如标签选择器、类选择器、ID选择器、层次选择器、属性选择器等，并通过实例展示了它们的用法。此外，还提到了CSS的优先级规则和外部样式表的导入方式。

##学习自狂神##
1.css是什么
2.CSS怎么用（快速入门）
3.CSS选择器（重点

文章目录

1.1、什么是CSS

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

1.2、发展史

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

2、快速入门

在这里插入图片描述
效果：

3、CSS的优势：

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

4.导入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: red">一级标题</h1>
</body>
</html>

优先级：行内样式优先级最高，剩下两个谁离h1近，就显示哪个样式（就近原则）
拓展外部样式两种写法

链接式：

html

<link rel="stylesheet" href="css/style.css">

导入式：

@import是CSS 2.1特有的

<style>
        @import url("css/style.css");
    </style>

5.三种基本选择器

1.标签选择器
格式标签：{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: blue;
        }
        p{
            color: red;
        }
    </style>
</head>
<body>
<h1>一级标签</h1>
<p>段落</p>
</body>
</html>

2.类选择器
类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first{
            color: red;
        }
        .second{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 class="first">一级标签</h1>
<h2 class="second">二级标签</h2>
<h3 class="first">三级标签</h3>
</body>
</html>

3.id选择器
id选择器：id必须保证全局唯一
格式：#id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #first{
            color: blue;
        }
        #second{
            color: chartreuse;
        }
        #third{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="first">一级标签</h1>
<h2 id="second">二级标签</h2>
<h3 id="third">三级标签</h3>
</body>
</html>

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

6.层次选择器

1.后代选择器

某个元素的后边

<style>
        body p{
            background: chartreuse;
        }
</style>

2.子选择器

只有一辈的

<style>
        body>p{
            background: red;
        }
</style>

3.相邻兄弟选择器

只选择一个，相邻（向下）

    <style>
        .first+p{
            background: blue;
        }
</style>

4.通用选择器

当前选中元素的向下的所有兄弟元素

<style>
        .first~p{
            background: aqua;
        }
</style>

7.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: aqua;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: chartreuse;
        }
        /*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
        p:nth-child(2){
            background: red;
        }
        /*选中父元素下的，第2个p元素*/
        p:nth-of-type(2){
            background: black;
        }
        h1:hover{
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1>h1</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
    <li>l4</li>
</ul>
</body>
</html>

演示
在这里插入图片描述

8.属性选择器

<!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: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            /*line-height:50px;*/
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
         = 表示绝对等于
         *= 表示包含
         ^= 表示以...开头
         $= 表示以...结尾
         存在id属性的元素
            a[]{}
         */
        /*id=first的元素*/
        a[id=first]{
            color: chartreuse;
        }
        /*class 中有item的元素*/
        a[class*="item"]{
            background: red;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: darkorange;
        }
        a[href$=pdf]{/*选中href中以pdf开头的元素*/
            background: aquamarine;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="first active item" id="first">1</a>
    <a href="http://www.91.com" class="firs">2</a>
    <a href="aaa.doc" class="active item">3</a>
    <a href="dasd.jpg" id="second" title="dasd">4</a>
    <a href="dasd.pdf" class="item">5</a>
</p>
</body>
</html>