前端三剑客之CSS

君自故乡来，应知故乡事 / 2023-07-19 / 原文

一、CSS介绍

1、CSS（层叠样式表，Cascading Style Sheets）

是一种用于描述网页内容（HTML或XML等）外观样式的标记语言。它是一种样式表语言，用于控制网页的布局、字体、颜色、大小、间距以及其他与显示有关的属性。

2、css学习步骤

先学习选择器，作用就是如何找到标签
找到标签之后，给标签增加样式

3、css选择器

选择器的语法结构
选择器 {
属性名1：属性值1
属性名2：属性值2
属性名3：属性值3
属性名4：属性值4
}

4、CSS的三种引入方式

内部样式表（Internal CSS）

在html中直接写在style标签

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS样式代码 */
    h1 {
      color: blue;
      font-size: 28px;
    }
    p {
      color: #333;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>这是标题</h1>
  <p>这是段落文本。</p>
</body>
</html>

外部样式表（External CSS）

单独写一个CSS文件，然后通过link标签引入外部的css文件

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

内联样式（Inline CSS）

直接写在标签上，行内式

<body>
  <p style="color: #666; font-size: 18px;">这是段落文本。</p>
</body>

二、选择器

1、基本选择器

#p1 {    # id选择器
    color: red;
    font-size: 30px;
}

.c1 {  # 类选择器
    color: #5e5e15;
    font-size: 25px;
}

p {    # p标签选择器
    color: green;
}

* {    # 通用选择器
    color: orange;
}

2、组合选择器

ul li .c1 {  # 层级选择标签
    color: red;
}

div > p {     选择div下的直接子标签
    color: red;
}

3、属性选择器

[username] {
    color: red;
        }

[username=kevin] {
     color: red;
        }

input[username=kevin] {
    color: red;
        }

4、分组和嵌套

div, p, span {
            color: red;
        }

5、伪类选择器

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

    <style>
        /*未访问时候显示的*/
        a:link {
            color: #FF0000;
        }

        /* 鼠标移动到链接上 */
        a:hover {
          color: #FF00FF
        }

        /* 选定的链接 */
        a:active {
          color: #0000FF
        }

        /* 已访问的链接 */
        a:visited {
          color: #00FF00
        }

        input:focus {
            outline: none;
            background-color: #eee;
        }

    </style>

</head>
<body>
<a href="https://th.bing.com/th/id/R.710b1f9f2fa1799788bbb5abf080ba34?rik=%2behXZ27GYBUYkA&riu=http%3a%2f%2fimage.hnol.net%2fc%2f2018-12%2f09%2f13%2f201812091309509561-239867.jpg&ehk=VnxPBitnefIIO85WygHQiwD8AKSP29Y6ne3kfNN%2fozg%3d&risl=&pid=ImgRaw&r=0">点我看西藏</a>
<a href="https://cbgccdn.thecover.cn/FhqtFG-kwKJOUOhhceVFGVo-hR0O"></a>
<a href="https://www.bing.com/ck/a?!&&p=be6377121d25ec1bJmltdHM9MTY4OTcyNDgwMCZpZ3VpZD0zMDBjN2MwMS1iOTE0LTY0OWItMzUyNC02ZWYwYjhjNjY1MTImaW5zaWQ9NTQ4NA&ptn=3&hsh=3&fclid=300c7c01-b914-649b-3524-6ef0b8c66512&u=a1L2ltYWdlcy9zZWFyY2g_cT3nvo7lpbPlm74mRk9STT1JUUZSQkEmaWQ9MzZFQTNDQzcwNzA4NzRFNzZCMTZFNDdGRTFEMTYxNkYzRDJFOUYyNA&ntb=1">点我看美女</a>
<a href="https://www.bing.com/images/search?view=detailV2&ccid=xvyXerHv&id=4D8ABF6E14C4E679789B7C67804D0710D800E9C4&thid=OIP.xvyXerHv_C9XwbYeoLShCwHaNK&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR.c6fc977ab1effc2f57c1b61ea0b4a10b%3frik%3dxOkA2BAHTYBnfA%26riu%3dhttp%253a%252f%252fpic.3gbizhi.com%252f2016%252f0619%252f20160619103137648.jpg%26ehk%3dNulKD8j21Eu6wB9zuAYpgZ8H3J7vxPq8IiYqI%252bx%252fRy8%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=2208&expw=1242&q=%e7%be%8e%e5%a5%b3%e5%9b%be&simid=608018643482119098&FORM=IRPRST&ck=C9DB6D1F1BF97615074838D318ED4617&selectedIndex=25">点我看美女2</a>

<p>
        <!-- 文本输入框 -->
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <!-- "name" 属性用于标识输入框的名称，用于在提交表单时识别输入的数据 -->
    </p>

</body>
</html>

6、选择器的优先级

比较id、类、标签选择器的优先级

# style样式、外部引入的CSS、行内式
1. 选择器相同的情况下，谁的优先级更高
行内式的优先级是最高的!!!，选择器相同，除了行内式谁离标签越近就听谁的

2. 选择器不同的情况下，谁的优先级更高
	# 比较id、类、标签选择器的优先级
行内式 > id选择器  > 类选择器 > 标签选择器

三、CSS属性相关

1、宽和高（width、height）

宽和高默认情况下只能跟块级元素设置才有效

/* 通过类选择器设置元素的宽度和高度 */
.myClass {
  width: 300px;
  height: 150px;
}

/* 通过元素选择器设置元素的宽度和高度 */
div {
  width: 400px;
  height: 200px;
}

2、字体属性

font-weight用来设置字体的字重（粗细）。
    值					描述
    normal				默认值，标准粗细
    bold				粗体
    bolder				更粗
    lighter				更细
    100~900				设置具体粗细，400等同于normal，而700等同于bold
    inherit				继承父元素字体的粗细值

3、文本颜色

纯颜色单词如red、十六进制、rgb

<style>
       div {
            font-size: 20px;
            /*font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;*/
            /*font-weight: bold;*/
            /*font-weight: bolder;*/
            /*font-weight: lighter;*/
            font-weight:  lighter;
            /*color: #cbab95;*/
            /*color: rgb(198, 88, 95);*/
            color: rgba(100,200,100, 0.9);
            /*opacity: 0.1; 透明度 */
        }
    </style>

4、文字属性

align：对齐

text-align: center; 文字居中

text-decoration: none; 去除下划线，比如超链接中去掉下划线

<style>
        p {
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: center; 掌握这个就行了，只能跟文本内容居中*/
            text-align: justify;  两端对齐
            text-indent: 28px;
        }

        a {
            /*text-decoration: underline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: overline;*/
            /*text-decoration: none; 掌握的*/
        }
    </style>

5、背景属性

<style>
        div {
            width: 800px;
            height: 800px;
            border: 1px  solid black;
            text-align: center;
            color: #df61ab;
            font-weight: lighter;
            /*background-color: red;*/
            background-image: url("th.jpeg");
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-repeat: no-repeat;*/
            /*background-position: 200px 350px;*/
            /*background-position: center center;*/
            /*background: repeat-x red  center center url("1234.png") ;*/
            /*background: repeat-x red;*/
        }

    </style>