【Web前端学习笔记】第二章 CSS常见使用方法

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

Web前端学习笔记

第二章 CSS

文章目录

前言

CSS是层叠样式表负责美化页面。这篇文章讲解了CSS的一些常见使用方法。

一、在html页面中添加CSS样式代码

在html中添加CSS有三种方式

  • 内联样式：在标签的style属性中添加样式代码, 弊端:不能复用
  • 内部样式：在head标签里面添加style标签, 通过选择器找到元素后再添加样式代码, 可以复用但是不能多页面复用
  • 外部样式：在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以多页面复用,可以将样式代码和html代码分离开
    工作中外部样式使用的最多, 学习过程中内部样式用的多CSS引入方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h2 {
            color: blue;
        }
    </style>
    <!-- 引入外部的CSS样式文件 -->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

二、选择器

选择器标签名
id选择器#id{}
类选择器.class{}
分组选择器div,#id,.class{}
属性选择器input[属性名=‘值’]{}
任意元素*{}
子孙后代div div p{}
伪类选择器a:link/visited/hover/active

1.标签名选择器

  • 格式: 标签名{样式代码}
  • 匹配页面中所有同名标签

2.id选择器

  • 格式: #id{样式代码}
  • 当需要选择页面中某一个元素时使用

3.类选择器

  • 格式: .class{样式代码}
  • 当需要选择页面中多个不相关元素时, 给多个元素添加相同的class属性值即可

4.分组选择器

  • 格式: p,#abc,.xyz{样式代码}
  • 将多个选择器合并为一个选择器的写法

5.属性选择器

  • 格式: 标签名[属性名=‘值’]{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 */
        #p1 {
           color: red;
        }
        /* class选择器 */
        .c1 {
            color: yellow;
        }
        /* 分组选择器 */
        h4,#p1,.c1 {
            background-color: blue;
        }
        /* 属性选择器 */
        input[type="text"] {
            color: red;
        }
        /* 任意元素选择器 */
        * {
            /*边框  粗细  样式  颜色*/
            border: 1px solid purple;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">

<p id="p1">苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣机</h3>
<h3>电视机</h3>
<h4>张三</h4>
</body>
</html>

6.子孙后代选择器

  • 格式: body div div p{样式代码}
  • 上面格式匹配的是body里面的div里面的div里面的所有p(包括子元素和后代元素)

7.子元素选择器

  • 格式: body>div>div>p{样式代码}
  • 上面格式匹配的是body里面的div里面的div里面的所有子元素p(不包含后代元素)

8.伪类选择器

  • 选择的是元素的状态,包括以下四种状态
  • a:link未访问/visited访问过/hover悬停/active点击{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 子孙后代选择器 */
        /*body div div p {
            color: red;
        }*/
        /* 子元素选择器 */
        div>div>p {
            color: blue;
        }
        /* 伪类选择器 */
        a:link {color: red} /*未访问状态*/
        a:visited {color: green} /*访问过状态*/
        a:hover {color: yellow} /*悬停状态*/
        a:active {color: pink} /*点击状态*/
    </style>
</head>
<body>
<a href="https://www.tmooc.cn/">超链接1</a>
<a href="https://pvp.qq.com/">超链接2</a>
<a href="https://www.baidu.com/">超链接3</a>

<p>p1</p>
<div>
    <p>p2</p>
    <div><p>p3</p></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>
</div>
</body>
</html>

9.颜色赋值

  • 三原色: 红绿蓝 RGB Red Green Blue , 每个颜色的取值范围0-255
  • 五种颜色赋值方式:
    • 颜色单词: red/blue/yellow
    • 6位16进制赋值: #ff0000
    • 3位16进制赋值: #f00
    • 3位10进制赋值: rgb(255,0,0)
    • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha透明度 值越小越透明

10.背景图片

  • background-image:url(“路径”) ; 设置背景图片
  • background-repeat:no-repeat; 禁止重复
  • background-size: 100px 200px; 设置背景图片尺寸 宽 高
  • background-position: 横向 纵向; 控制位置, 像素偏移值 和 百分比两种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            /*color: #ff0000;
            color: #f00;
            color: rgb(55,50,100);*/
            color: rgba(255,0,0,0.3);
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*设置背景图片*/
            background-image: url("../day01/abc/c.jpg");
            /*设置背景图片尺寸*/
            background-size: 100px 100px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置: 横向 纵向*/
            /*background-position: 50px 50px;*/
            background-position:50% 50%;
        }
        #d2{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-position: 90% 70%;
            background-size: 318px 319px;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<h1>颜色测试</h1>
</body>
</html>

11.文本和字体相关样式

  • text-align: left/right/center; 文本水平对齐方式
  • text-decoration: overline/underline/line-through/none 文本修饰
  • line-height:20px; 行高, 多行文本可以控制行间距, 单行文本可以实现垂直居中
  • font-size: 20px; 设置字体大小
  • font-weight:bold/normal; 设置加粗或去掉加粗
  • font-style:italic; 设置斜体
  • font-family:xxx,xxx,xxx; 设置字体
  • font: 20px xxx,xxx,xxx; 设置字体大小和字体
  • text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊

12.元素的显示方式display

display :

  • block : 块级元素的默认值 , 特点: 独占一行,可以修改元素的宽高 , 包括: div,h1-h6,p

  • inline : 行内元素的默认值, 特点:共占一行, 不可以修改元素的宽高, 包括: span, 超链接a

  • inline-block : 行内块元素的默认值, 特点:共占一行, 可以修改宽高, 包括:img,input

  • none : 隐藏元素

  • 行内元素不能修改宽高, 如必须修改,则需要先把display改成block或inline-block

13.盒子模型

  • 作用: 控制元素的显示效果 包括 : 尺寸,元素位置,边框,元素内容的位置
  • 盒子模型: 内容+外边距+边框+内边距
  • 内容content
  • 外边距margin
  • 边框border
  • 内边距padding
13-1.盒子模型之内容Content
  • width/height
  • 赋值方式,两种 :
    • 像素 : 200px
    • 上级元素的百分比 : 50%
  • 行内元素不能修改宽高
13-2.盒子模型之外边距
  • 外边距 : 元素距上级元素或相邻兄弟元素的距离称为外边距
  • 赋值方式 :
    • margin-left/margin-right/margin-top/margin-bottom : 10px; 单独某个方向赋值
    • margin : 10px; 四个方向赋值
    • margin : 10px 20px; 上下10 左右20
    • margin : 10px 20px 30px 40px; 上右下左 顺时针赋值
  • 上下相邻彼此添加外边距取最大值 ,左右相邻相加
  • 行内元素上下外边距无效
  • 粘连问题 : 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow : hidden解决
  • 部分标签会自带外边距,比如 : body ,h1-h6,p,列表标签
13-2.盒子模型之边框
  • 赋值方式:
    • border-left/right/top/bottom : 粗细 样式 颜色; 单独某一个方向添加边框
    • border : 粗细 样式 颜色; 四个方向添加边框
    • border-radius : 20px ; 圆角, 值越大越圆, 超过或等于宽高的一半为正圆
13-3.盒子模型之内边距

  • 内边距: 元素边缘距内容的距离为内边距

  • 赋值方式: 和外边距类似

    • padding-left/right/top/bottom:10px; 单独某个方向赋值
    • padding:10px; 四个方向赋值
    • padding:10px 20px; 上下10 左右20
    • padding:10px 20px 30px 40px; 上右下左 顺时针赋值

  • 给元素添加内边距会影响元素的宽高

三、CSS的三大特性

  1. 继承性 : 元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响,如:超链接的字体颜色
  2. 层叠性 : 多个选择器可能选择到同一个元素, 添加的样式不同的时候会全部层叠生效, 如果作用的样式相同则由优先级决定哪个生效
  3. 优先级 : 作用范围越小 , 优先级越高, !important > id > class > 标签名 > 继承(继承属于间接选中)

1.居中相关

  • text-align:center; 让元素的文本内容居中, 让元素里面的行内元素自身和行内块元素自身居中

  • margin:0 auto; 让块级元素自身居中

2.元素定位

  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位
  • 浮动定位

3.静态定位

  • 默认的定位方式, 也称为文档流定位
  • 格式: position:static
  • 特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列 ,无法实现层叠效果
  • 如何控制元素的位置? 通过外边距

4.相对定位

  • 格式: position:relative

  • 特点: 可以实现层叠效果, 元素不脱离文档流(不管元素显示到什么位置 仍然占着原来的位置) (注:能层叠)

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于初始位置做偏移

  • 应用场景: 当需要移动某个元素而其它元素不受影响时使用(元素位置微调)

5.绝对定位

  • 格式: position:absolute

  • 特点: 可以实现层叠效果, 元素脱离文档流(不占原来的位置)

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口或某一个上级元素做位置偏移,如果需要相对于某个上级元素,必须给上级元素设置为相对定位

  • 应用场景: 当需要网页面中添加一个元素, 这个元素不影响其他元素的显示位置时使用绝对定位(例如京东菜单)

6.固定定位

  • 格式: position:fixed;

  • 特点: 元素固定在窗口的某个位置, 元素脱离文档流

  • 如何控制元素的位置? 通过left/right/top/bottom让元素相对于窗口做位置偏移

  • 应用场景: 当需要将元素固定在窗口某个位置时使用

7.浮动定位

  • 格式: float:left/right

  • 特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素边缘或其他浮动元素时停止

  • 浮动元素一行装不下会自动换行, 换行时有可能被卡住

  • 当元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来出现显示异常,给元素添加overflow:hidden解决

  • 应用场景: 当需要将纵向排列的元素改成横向排列时使用

8.溢出设置Overflow

  • visible(默认): 超出部分显示
  • hidden: 超出部分隐藏
  • scroll: 超出部分滚动显示

9.显示层级z-index

  • 当元素修改定位方式时,会出现元素层叠的问题, 通过z-index可以控制层叠的元素谁显示在上面 谁显示在下面
  • 必须改了定位方式之后z-index样式才会生效
  • z-index值越大显示层级越靠前

总结

本文简单介绍了CSS的几种引用方法以及常见的使用方式。

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：基于SpringBoot使用mybatis-generator访问MariaDB

下一篇：【11】C语言

“【Web前端学习笔记】第二章 CSS常见使用方法” 的相关文章

css 标签默认样式及清除1年前 (2023-02-02)
「HTML+CSS」--自定义加载动画【046】1年前 (2023-02-02)
学习CSS3，使用双旋转实现福到了的迎春喜庆特效1年前 (2023-02-02)
大学生网页制作期末作业-HTML+CSS+JavaScript（包含源码）-游戏网站CSGO1年前 (2023-02-02)
CSS 加载进度条1年前 (2023-02-02)
CSS.前端基础.html1年前 (2023-02-02)
【HTML | CSS】春节将至，为网页挂上精美的灯笼吧（附源码）程序员的浪漫1年前 (2023-02-02)
CSS世界已经有了CSS2和CSS3，那会有CSS4吗？1年前 (2023-02-02)
你对CSS权重真的足够了解吗？1年前 (2023-02-02)
我用css3为好友胡歌的宝宝做了一个动画照片墙1年前 (2023-02-02)

阿里云国际版