CSS3学习笔记（一）

最新推荐文章于 2022-10-28 10:25:12 发布

一天到晚写BUG

最新推荐文章于 2022-10-28 10:25:12 发布

阅读量211

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_43760651/article/details/115272882

版权

1、初识CSS

1.1 什么是 CSS？

CSS:Cascading Style Sheet 层叠级联样式表

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

*：也称级联样式表。

1.2 CSS 解决的问题

HTML 从未打算包含用于格式化网页的标签！

创建 HTML 的目的是描述网页的内容，例如：

<h1>这是一个标题。</h1>

<p>这是一个段落。</p>

将之类的标签和 color 属性添加到 HTML 3.2 规范后，Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为一个漫长而昂贵的过程。

为了解决这个问题，万维网联盟（W3C）创建了 CSS。

CSS 从 HTML 页面中删除了样式格式！

1.3 CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

2、CSS入门

2.1 CSS的优势

内容和表现（CSS）分离
我也结构表现统一，可以实现复用
样式十分丰富
建议使用独立HTML的CSS文件
利用SEO，容易被搜索引擎收录

2.2 CSS的导入方式

第一种：内部样式：HTML和CSS未分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--规范，<style>可以编写CSS代码
    选择器：{
    声明1；
    声明2；
    声明3；}
    -->
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

第二种：外部样式

1.HTML和CSS分离(建议使用)：

在这里插入图片描述

2.导入式(css2.0)

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

    <!--    <link rel="stylesheet" href="CSS/style.css">-->
    <style>
        @import url("CSS/style.css");
    </style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

第三种：行内样式：在标签元素中添加属性

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

<!--    <link rel="stylesheet" href="CSS/style.css">-->
</head>
<body>
<h1 style="color: red">一级标题</h1>
</body>
</html>

优先级：采用就近原则

2.3 span标签

标签定义及使用说明

用于对文档中的行内元素进行组合。

标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对应用样式，那么元素中的文本与其他文本不会任何视觉上的差异。

标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示和注释

提示：被 span元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

3、选择器

3.3 基本选择器

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

3.3.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
<!--标签选择器：会选择到页面上所有的这个标签的元素-->
    <style>
        h1{
            color: #3a8021;
            background: red;
        }
    </style>
</head>
<body>
<h1>Java学习</h1>
<h1>学习Java</h1>
<p>B站学习Java</p>
</body>
</html>

在这里插入图片描述

3.3.2 类选择器class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!--类选择器的格式  .class的名称{}
    好处：可以多个标签归类，class名称相同的为一个类，可以复用-->
    <style>
        .title1 {
            color: #3a8021;
        }
        .title2 {
            color: #793dff;
        }
    </style>
</head>
<body>
<h1 class="title1">标题一</h1>
<h1 class="title2">标题二</h1>
<h1 class="title1">标题三</h1>
<p class="title2">你好啊，Java</p>
</body>
</html>

在这里插入图片描述

3.3.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <!--id选择器：id必须保证全局唯一
    #id名称{}
    优先级：不遵循就近原则
    id选择器>class类选择器>标签选择器
    -->
    <style>
        #wang {
            color: #793dff;
        }

        .wly {
            color: #27801c;
        }

        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1 id="wang" class="wly">标题一</h1>
<h1 class="wly">标题二</h1>
<h1 class="wly">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</body>
</html>

在这里插入图片描述

3.4 层次选择器

3.4.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <!--后代选择器-->
    <style>
        body p {
            color: #3a8021;
        }
    </style>
</head>
<body>
<p>hahaha</p>
<p>hahaha</p>
<p>hahaha</p>
<ul>
    <li>
        <p>haha</p>
    </li>
    <li>
        <p>haha</p>
    </li>
</ul>
</body>
</html>

在这里插入图片描述

3.4.2 子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <!--子选择器-->
    <style>
        body>p{
            color: #793dff;
        }
    </style>
</head>
<body>
<p>hahaha</p>
<p>hahaha</p>
<p>hahaha</p>
<ul>
    <li>
        <p>haha</p>
    </li>
    <li>
        <p>haha</p>
    </li>
</ul>
</body>
</html>

在这里插入图片描述

3.4.3 相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <!--相邻兄弟选择器，相邻（只有一个，对下不对上）-->
    <style>
      .wang +p{
          color: red;
      }
    </style>
</head>
<body>
<p>hahaha</p>
<p class="wang">hahaha</p>
<p>hahaha</p>
<p class="wang">hahaha</p>
<p>hahaha</p>
<ul>
    <li>
        <p>haha</p>
    </li>
    <li>
        <p>haha</p>
    </li>
</ul>
</body>
</html>

在这里插入图片描述

3.4.4 通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <!--通用选择器：当前选择元素的向下的所有兄弟标签-->
    <style>
        .wang~p{
            color: #3d0eff;
        }
    </style>
</head>
<body>
<p>hahaha</p>
<p class="wang">hahaha</p>
<p>hahaha</p>
<ul>
    <li>
        <p>haha</p>
    </li>
    <li>
        <p>haha</p>
    </li>
</ul>
<p class="wang">hahaha</p>
<p>hahaha</p>
</body>
</html>

在这里插入图片描述

3.5 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child {
            background: #3a8021;
        }

        /*选中ul的最后一个子元素*/
        ul li:last-child {
            background: #3d0eff;
        }

        /*选中p元素的第一个元素（段落一）
        p:nth-child(1)：选择当前p元素的父级元素，并选中父级元素的第一个*/
        p:nth-child(1) {
            background: #793dff;
        }

        /* 选中父级元素下的第二个类型为p的元素*/
        p:nth-of-type(2) {
            background: #ffec20;
        }
    </style>
</head>
<body>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<ul>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ul>
</body>
</html>

在这里插入图片描述

3.6 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        .demo a {
            float: left; /*浮动*/
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 20px; /*圆角*/
            background: green;
            text-align: center;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 1、 选中存在id属性的元素
        a[id或者a[id=first],两者是一样的*/
        a[id] {
            background: yellow;
        }

        /*2、选中class属性含有links的元素
        属性名：属性名=属性值（正则表达式）
        =：绝对等于
        *=：包含这个属性值的所有元素
        ^=：以这个属性值开头的元素
        $=：以这个属性值结尾的元素*/
        a[class*="links"] {
            background: red;
        }

        /*3、选中href中以http开头的元素*/
        a[href^=http] {
            background: #793dff;
        }

        /*4、选中一doc属性值结尾的元素*/
        a[href$=doc] {
            background: brown;
        }
    </style>
</head>
<body>
<p class="demo">
    <!--href里面的属性值有的是乱写的，用来体现不一样就可以-->
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://bilibili.com" class="links item " target="_blank" title="test">2</a>
    <a href="123.html" class="links item">3</a>
    <a href="123.png" class="links item">4</a>
    <a href="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>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

在这里插入图片描述

4、网页的美化

为什么美化网页？

有效的传递页面信息
网页漂亮才能吸引用户
凸显页面的主题
提高用户的体验

4.1 字体

字体样式参考：菜鸟教程

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <style>
        body {
            font-family: 楷体;
            color: orange;
        }

        h1 {
            font-size: 50px;
        }

        .p1 {
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>阴阳师</h1>
<p class="p1">
 阴阳师是起源于中国的掌握着阴阳家、道家，懂得观星宿、相人面，还会测方位、知灾异，寻风水，画符念咒、施行祭祀的一种道士或修士。
</p>
<p>
 先秦时期的炼气士和修士了吸收中国先秦诸子百家时期的道家和阴阳家在汉代逐渐形成道教，而阴阳师则是脱胎于道教的一种修行派别。
</p>
</body>
</html>

4.2 文本样式

文本样式参考：菜鸟教程

4.2.1 颜色、文本居中

        h1{
            color: red;
            text-align: center;
        }

图片与文字对齐：

<style>
img{
      vertical-align: middle;
	}
</style>
<p class="p1">
    <img src="../../resource/阴阳师.png" alt="阴阳师" width="80" height="100">
    阴阳师是起源于中国的掌握着阴阳家、道家，懂得观星宿、相人面，还会测方位、知灾异，寻风水，画符念咒、施行祭祀的一种道士或修士。
</p>

4.2.2 文本首行缩进

        p{
            text-indent: 2em;
        }

4.2.3 行高

 	.p1{
            background: #ffec20;
            line-height: 50px;
        }

4.2.4 下划线、中划线

       .p1 {
            text-decoration: underline;
        }

        .p2 {
            text-decoration: line-through;
        }

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Textfont</title>
    <!--
    颜色：三种形式（单词、RGB，RGBA）
    text-align: 排版（居中、居左。居右）
    text-indent：首行缩进
    line-height：行高
text-decoration：文本修饰
    -->
    <style>
        h1 {
            color: red;
            text-align: center;
        }

        p {
            text-indent: 2em;
        }

        .p1 {
            background: #ffec20;
            line-height: 50px;
        }

        .p1 {
            text-decoration: underline;
        }

        .p2 {
            text-decoration: line-through;
        }

        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>阴阳师</h1>
<p class="p1">
    <img src="../../resource/阴阳师.png" alt="阴阳师" width="80" height="100">
    阴阳师是起源于中国的掌握着阴阳家、道家，懂得观星宿、相人面，还会测方位、知灾异，寻风水，画符念咒、施行祭祀的一种道士或修士。
</p>
<p class="p2">
    先秦时期的炼气士和修士了吸收中国先秦诸子百家时期的道家和阴阳家在汉代逐渐形成道教，而阴阳师则是脱胎于道教的一种修行派别。
</p>
</body>
</html>

在这里插入图片描述

4.3 超链接伪类

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

    <style>
        body {
            text-align: center;
        }

        /*鼠标悬浮的状态*/
        a:hover {
            color: orange;
        }

        /*鼠标按住未释放的状态*/
        a:active {
            color: green;
            font-size: 30px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="../../resource/电影.png" alt="" width="300" height="420">
</a>
<p>
    <a href="#">哥斯拉大战金刚 Godzilla vs Kong (2021)</a>
</p>
<p>
    <a href="#">导演: 亚当·温加德</a>
</p>
<p>
    编剧: 特里·鲁西奥 / 埃里克·皮尔森 / 麦克思·鲍伦斯坦 / 迈克尔·道赫蒂 / 扎克·希尔兹
</p>
<p>
    主演: 亚历山大·斯卡斯加德 / 米莉·波比·布朗 / 丽贝卡·豪尔 / 凯莉·霍特尔 / 布莱恩·泰里·亨利
</p>
</body>
</html>

在这里插入图片描述

4.4 阴影

语法

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>阴影</title>
    <style>
        h1 {
            text-shadow: 2px 2px #FF0000;
        }
    </style>
</head>
<body>

<h1>你好，世界!</h1>

</body>
</html>

在这里插入图片描述

4.5 列表

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

列表.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="Div">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

style.css

#Div {
    width: 300px;
    background: #a6abab;
}

.title {
    font-size: 20px;
    line-height: 30px;
    background: green;
}

/*list-style:
去掉列表圆点：none
空心圆：circle
数字：decimal
正方形：square
*/
ul li {
    height: 30px;
    list-style: none;
}

a {
    text-decoration: none;
    font-size: 15px;
    color: #1d0715;
}

a:hover {
    color: green;
    text-decoration: underline;
}

在这里插入图片描述

4.6 背景图像

标签定义及使用说明

标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

提示和注释

提示：div 元素经常与 CSS 一起使用，用来布局网页。

注释：默认情况下，浏览器通常会在 div元素前后放置一个换行符。然而，您可以通过使用 CSS 改变这种情况。

实例一：

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

    <style>
        div {
            width: 600px;
            height: 300px;
            border: 1px solid red; /*边框*/
            background-image: url("../../resource/小黄人.png"); /*默认是平铺*/
        }

        /*不平铺*/
        .div1 {
            background-repeat: no-repeat;
        }

        /*水平平铺*/
        .div2 {
            background-repeat: repeat-x;
        }

        /*垂直平铺*/
        .div3 {
            background-repeat: repeat-y;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

在这里插入图片描述

实例二(列表实例代码改动)：

.title {
    font-size: 20px;
    line-height: 30px;
    background: green 250px 1px no-repeat;
    background-image: url("../../resource/header.jpg") ;
}

/*list-style:
去掉列表圆点：none
空心圆：circle
数字：decimal
正方形：square
*/
ul li {
    height: 30px;
    list-style: none;
    background: 210px 1px no-repeat;
    background-image: url("../../resource/箭头.png") ;
}

在这里插入图片描述

4.7 渐变

渐变调色：https://www.grabient.com

参考文献：https://www.runoob.com/css3/css3-gradients.html

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例：从上到下的线性渐变：

boby {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

实例：从左到右的线性渐变：

body{
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

颜色节点均匀分布的径向渐变：

body{
  background-image: radial-gradient(red, yellow, green);
}

形状为圆形的径向渐变：

body{
  background-image: radial-gradient(circle, red, yellow, green);
}

之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例：从上到下的线性渐变：

boby {
    background-image: linear-gradient(#e66465, #9198e5);
}

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

实例：从左到右的线性渐变：

body{
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

CSS3 径向渐变

径向渐变由它的中心定义。

颜色节点均匀分布的径向渐变：

body{
  background-image: radial-gradient(red, yellow, green);
}

形状为圆形的径向渐变：

body{
  background-image: radial-gradient(circle, red, yellow, green);
}

一天到晚写BUG

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记（一）

1、初识CSS1.1 什么是 CSS？CSS:Cascading Style Sheet 层叠级联样式表CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中*：也称级联样式表。1.2 CSS 解决的问题HTML 从未打算包含用于
复制链接

扫一扫