前端学习记录 CSS3基础篇

yonghuminyicunzai

已于 2022-12-20 22:58:07 修改

阅读量101

点赞数

文章标签： css3 前端 css

于 2022-12-12 17:09:38 首次发布

本文链接：https://blog.csdn.net/m0_46739166/article/details/128289873

版权

DAY3-CSS层叠样式表一

学习目标：

1、什么是CSS

CSS层叠样式表（Cascading Style Sheets），用于设置HTML页面中的文本内容、图片外形、版面布局和外观显示的样式。

CSS可以实现结构（HTML）与样式（CSS）相分离。

2、CSS基础选择器

<head>
    <style>
        /* CSS语法：选择器{样式}，即改样式的主体{改成什么样式} */
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>interesting</p>
</body>

CSS代码风格规范：

1、{ }中的样式展开书写；

2、CSS样式除特殊情况均用小写；

3、选择器与{ }之间，: 后保留一个空格。


```html
<head>
    <style>
        /* 基础选择器 */
        /* 1. 标签选择器 可以快速为页面中同类型标签设置统一样式*/
        /* 标签名{样式} */
        p {
            color: blue;
        }

        div {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

<head>
    <style>
        /* 2. 类选择器 可以单独选择一个或几个标签 */
        /* .类名 {样式} */
        /* 类名自定义，但不能与标签名相同，不要使用纯数字、中文，默认类命名规则详见开发手册 */
        .redtext{
            color: red;
        }

        .box{
            width: 100px;
            height: 100px;
        }
        .red {
            background-color: red;
            color: green;
        }
        .green{
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="redtext">ulist</li>
        <li>ulist2</li>
    </ul>

    <!-- 多类名，即给一个标签指定多个类名  -->
    <!-- 相同的样式放在一个类名中便于修改，使代码更简洁  -->
    <div class="box red">多类名</div>
    <div class="box green">多类名</div>
    <div class="box red">多类名</div>
</body>

<head>
    <style>
        /* 3. id选择器 只能调用一次 */
        /* #id{样式} */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">pink</div>
</body>

*class类似于名字，可以重复使用；id类似于身份证号，具有特异性，只能使用一次。

<head>
    <style>
        /* 4. 通配符选择器 选取页面中所有的元素（标签），不需要调用 */
        /* *{样式} */
        * {
            font-size: small;
        }
    </style>
</head>

3、设置字体样式

<head>
    <style>
        /* 字体系列 */
        /* 一般字体属性直接定义给body标签 */
        body {
            /* 尽量使用系统默认自带字体,系统会从第一个字体开始设置页面字体，
            如果第一种字体电脑未下载，则查看第二种 */
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
            /* 可测量出设计稿的实际大小 */
            font-size: 14px;
            /* 字体粗细具体可查阅CSS手册 */
            /* 范围100-900 normal400 bold700，实际开发中使用数字 */
            font-weight: 300;
        }

        em {
            /* 字体风格 normal italic 主要作用是让原本倾斜的字体不倾斜 */
            font-style: normal;
        }

        /* 标题标签不受body标签影响，需要按照设计单独指定字体属性 */
        h2 {
            font-size: 16px;
            font-weight: 400;
        }
    </style>
</head>
<body>
    <h2>标题header</h2>
    <p>first line</p>
    <p>第二行</p>
    <em>第三行</em>
</body>

<head>
    <style>
        div {
            /* 字体的符合属性 顺序不可以调换 */
            /* font: font-style font-weight font-size/line-height font-family; */
            /* 其他属性可以省略，但size和family属性必须保留，否则font属性将不起作用 */
            font: italic 700 16px 'Microsoft yahei';
        }
    </style>
</head>
<body>
    <div>字体的符合属性</div>
</body>

4、设置文本样式

<head>
    <style>
        h1 {
            /* 文本颜色，预设值、rgb、十六进制 */
            color: blueviolet;
            /* 对齐文本，文本水平对齐方式 left,right,center*/
            text-align: center;
            /* 装饰文本 none、下划线underline、删除线line-through、上划线overline */
            text-decoration: underline;
        }

        a {
            /* 取消链接默认自带的下划线 */
            text-decoration: none;
        }

        p {
            /* 首行缩进 em是代表一个文字长度的相对单位*/
            text-indent: 2em;
            /* 行间距 = 文本高度+上间距+下间距*/
            line-height: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1>head</h1>

        <a href="#">链接</a>

        <p>首行缩进 <br/> 
            第二行</p>
    </div>
</body>

5、CSS的三种引入方式

内部样式表（嵌入式）

将样式表写入html页面内部，将所有的SCC代码抽取出来，单独放到一个

便于控制整个页面中的元素样式。

行内样式表（行内式）

更改当前标签的简单的样式。

<body>
    <p style="color: pink;">粉红色</p>
</body>

外部样式表（链接式）

单独建立CSS样式文档，在使用时将其应用到html文档中。

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>粉红色</div>
</body>

/* CSS文件中只有样式没有标签 */
div {
    color: pink;
}

6、使用Chrome调试工具调试样式

F12打开网页调试工具——elements窗口中左侧为HTML右侧为CSS

DAY4-CSS层叠样式表二

学习目标：

1、emmet语法

快速生成HTML结构

生成标签，直接输入标签名+Tab
生成多个标签，如div*3+Tab
有父子级关系的标签，如ul > li
有兄弟关系的标签，如div+p
生成带有类名或id的标签，如p.nav、div#banner
生成有顺序的div类名，如.demo$*5
生成标签内部内容，如div{…}

快速生成CSS语法样式

2、CSS复合选择器

<head>
    <style>
        /* 1. 后代选择器， 父元素 子元素 {样式}*/
        /* 选择ol中的li */
        ol li {
            color: blueviolet;
        }

        /* 选择ol中的li中的a */
        ol li a {
            color: blueviolet;
        }

        /* 选择ul class="nav"中的li */
        .nav li {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <ol>
        <li>list</li>
        <li><a href="#">link</a></li>
    </ol>
    <ul>
        <li>list</li>
    </ul>
    <ul class="nav">
        <li>list</li>
    </ul>
</body>

<head>
    <style>
        /* 2.子选择器， 父元素 >最近一级子元素 {样式} */
        /* 选择div中的a */
        .nav>a {
            color: violet;
        }

        /* 选择div中的p */
        .nav>p {
            color: violet;
        }

        /* 不可选择p再下一级的a */
        div>span {
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">link</a>
        <p>
            <span>span</span>
        </p>
    </div>
</body>

<head>
    <style>
        /* 3.并集选择器，元素1,元素2 {样式} */
        /* 并集选择器习惯竖着写，最后一个选择器不需要加 "," */
        /* 同时选择div和p */
        div,
        p {
            color: violet;
        }

        /* 同时选择div、p和ul中的li */
        div,
        p,
        .alpha li {
            color: violet;
        }
    </style>
</head>

<body>
    <div>A</div>
    <p>B</p>
    <span>C</span>
    <ul class="alpha">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
</body>

3、伪类选择器使用规范

<head>
    <style>
        /* 4.链接伪类选择器 */
        /* a: link 选择未访问过的链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* a: visited 选择已被访问过的链接 */
        a:visited {
            color: gray;
        }

        /* a: hover 当鼠标经过时 */
        a:hover {
            text-decoration: underline;
        }

        /* a: active 选择正在被点击（活动的）链接 */
        a:active {
            color: turquoise;
        }
    </style>
</head>

<body>
    <p><a href="#">link1</a></p>
    <p><a href="http://">link2</a></p>
    <p><a href="http://www.">link3</a></p>
</body>

<head>
    <style>
        /* 4.focus伪类选择器, input: focus */
        input:focus {
            background-color: rgb(204, 207, 208);
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

4、元素的显示模式

元素显示模式就是元素（标签）以什么方式进行显示。HTML元素分为块元素和行内元素两类。

块元素

独占一行
高、宽、内外边距可以自定义
宽度默认是容器（父级宽度）的100%
是一个容器，里面可以装块或行内元素
文字元素如p或h中不能再放其他块元素

行内元素

相邻行内元素可显示在一行上
宽高设置无效
默认宽度是内容本身的宽度
行内元素只能容纳文本或其他行内元素
链接中不能再放其他链接
连接中可以包含块级元素

行内块元素 < img / > < input / > < td >

相邻行内元素可显示在一行上，但之间会有空白
高、宽、内外边距可以自定义
默认宽度是内容本身的宽度
行内元素只能容纳文本或其他行内元素
链接中不能再放其他链接
连接中可以包含块级元素

5、显示模式的互相转换

当某一种元素需要设置另一种元素的属性时需要进行元素的转换。

<head>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: grey;
            text-decoration: none;
            /* 将行内元素a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: violet;
            /* 将块级元素div 转换为 行内元素 宽高设置随即无效 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: blue;
            /* 将行内元素span 转换成 行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">元素转换</a>
    <div>块级元素</div>
    <div>块级元素</div> <br />
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

*文字的垂直居中：让行高等于盒子的高度

6、设置背景图片

背景设置包括：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定（背景附着）等。
background-image实际开发中常用于logo或装饰性的小图片或超大背景图片。
其优点是位置非常便于控制。

<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: #000;
            /* 设置背景图片 */
            background-image: url(images/logo.png);
            /* 背景平铺 background-repeat：repeat|no-repeat|repeat-x|repeat-y */
            background-repeat: no-repeat;
            /* 背景图片位置 background-position: x y 或方位词 top bottom left center right */
            /* 也可以使用混合单位 */
            /* 只写一个方位词或坐标第二个省略，默认为居中 */
            background-position: center;
        }
    </style>
</head>

<body>
    <div></div>
</body>

背景位置案例一：icon+文字

<head>
    <style>
        div {
            width: 118px;
            height: 40px;
            /* background-color: #900; */
            font-size: 14px;
            line-height: 40px;
            /* 插入背景图片 */
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            /* 文字缩进 */
            text-indent: 1.5em;
        }
    </style>
</head>

<body>
    <div>
        成长守护平台
    </div>
</body>

背景位置案例二：超大背景图片

<head>
    <style>
        /* 便于显示背景图片最核心的中间区域 */
        body {
            background-image: url(images/bg.jpg);
            background-position: center 40px;
        }
    </style>
</head>

<body>
</body>

背景附着 *background属性复合写法

<head>
    <style>
        /* 背景附着 background-attachment: scroll/fixed */
        /* body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            color: #fff;
            font-size: 20px;
            固定背景图片
            background-attachment: fixed;

        } */

        /* background属性复合写法 */
        /* 默认顺序：颜色，图片，平铺，附着，位置 */
        body {
            background: black url(images/bg.jpg) no-repeat fixed center top;
            font-size: 20px;
            color: #fff;
        }
    </style>
</head>

<body>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
    <p>paragraph</p>
</body>

背景色半透明

<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            /* rbga(r,g,b,a) 其中a为透明度，值越接近1透明度越低 */
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div></div>
</body>