学习笔记-CSS-CSDN博客

本文链接：https://blog.csdn.net/seruyyyyyy/article/details/121409920

CSS简介（层叠样式表）
css主要用于场景，用于美化页面

HTML只关心内容的语义，所以外观样式一般由css来负责，使页面更美观

css语法规范
由选择器和一条或多条声明构成
在这里插入图片描述

   <style>
        /* 选择器 */
        /* 给谁改样式（改什么样式） */
        p {
    
            /* 修改文字为红色 */
            color: red;
            /* 修改文字大小为十二像素 */
            font-size: 12px;
        }
    </style>

ps:
1.style标签在head标签里输入，不与body标签嵌套
2.选择器是用于指定CSS样式的HTML标签，花括号内饰对该对象设置的具体样式
3.属性与属性值之间以键值对的形式出现
结束语句要加分号

CSS代码风格
建议的写代码书写方式
1.样式格式书写：建议展开
2.样式大小写：建议小写
3.空格规范：属性值前面，冒号后面保留一个空格，选择器和大括号之间保留一个空格

CSS选择器
找到需要修改样式的标签（选对人）
设置标签样式，比如设置颜色（做对事）

CSS基础选择器
基础选择器：由单个选择器组成，有标签选择器，类选择器，id选择器，通配符选择器

1）标签选择器
以标签名作为选择器
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签

    <style>
        /* 标签选择器：写上标签名即可 */
        p {
    
            color: green
        }
        div {
    
            color:pink;
        }
    </style>
</head>
<body>
    <p>男</p>
    <p>男</p>
    <p>男</p>
    <div>女</div>
    <div>女</div>
    <div>女</div>
</body>

2）类选择器
想差异化选择不同标签
不能用标签名命名类名
不能使用纯数字，中文等命名

<head>
 <style>
        /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个标签 开发最常用 */
        .red{
    
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">hhh</li>
        <li class="red">xxx</li>
        <li>zzz</li>
        <li>qqq</li>
        <li>bbb</li>
        <li>ddd</li>
    </ul>
    <div class="red">我也想红</div>
</body>

2.2）类选择器-多类名
给一个标签指定多个类名，以达到更多的选择目的，简单理解就是一个标签有多个名字

 <style>
        .red{
    
            color:red;
        }
        .font35{
    
            font-size: 35px;
        }
    </style>
<body>
    <div class="red font35">刘诗睿</div>
</body>
</html>

3).id选择器

    <style>
        /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，被人切勿使用 */
        #pink{
    
            color:pink ;
        }
    </style>
<body>
    <div id="pink">迈克尔</div>
</body>

id选择器与类选择器的区别
类选择器（class）好比人的名字，一个人可以有多个名字，而同一个名字也可以被多个人使用
而id选择器好比人的身份证号码，全中国是唯一的，不得重复
类选择器在样式修改中用的最多，id选择器一般用于页面唯一性的元素上，经常与javascri搭配使用

4).通配符选择器
使用“*”定义，他表示选取页面中所有元素并修改（标签）
不需要调用，自动就给所有元素使用样式
特殊情况采用，注意使用场景

    <style>
        *{
    
            color:red;
        }
        /* 这里把所有标签全都改为红色了 */
    </style>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

字体属性

1.字体

    <style>
        h2{
    
            font-family:'微软雅黑';
        }
        p{
    
            font-family: 'Microsoft Yahei',;
        }
    </style>

<body>
    <h2>mmmmmm</h2>
    <p>werhsdlfkjherlh89</p>
    <p>elhglejfhalkfhlkewahrfiuewyhweyoweryiudf</p>
    <p>lfhslfyaewacaleriuhaewlkjfghae</p>
    <p>akfugyaerygsdafghaewjgwe87v7year</p>
    <p>kzjfghjwegrfergfkwejagrkutg</p>
    <p>ahrvflrekthaef8hyvjkhbfgjkewar</p>
</body>

ps:
1.各种字体必须使用英文逗号隔开
2.一般情况下，如有空格隔开的多个单词组成的字体，则用引号括起来，如’Microsoft Yahei’
3.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

2.字体大小

body{
            font-size: 16px;
        }

ps：
1.px大小是网页平时最常用的单位
2.谷歌浏览器默认文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致，尽量给明确大小，不要默认
4.可以给body指定整个页面文字的大小
5.标题标签比较特殊，需要单独指定大小

3.字体粗细
在这里插入图片描述
4.文字样式

5.字体的复合属性

原本要给代码字体赋多个属性代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
            font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft Yahei';
        }
    </style>
</head>
<body>
    <div>代码</div>
</body>
</html>

简便方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
            /* font-style: italic; */
            /* font-weight: 700; */
            /* font-size: 16px; */
            /* font-family: 'Microsoft Yahei'; */
            /* 复合属性：简写的方式 */
            /* font: font-style font-weight font-size/line-height font-family; */
            font: italic 700 16px 'Microsoft Yahei';
        }
    </style>
</head>
<body>
    <div>代码</div>
</body>
</html>

注意：1.各属性之间不能颠倒顺序，并且要用空格隔开
2. 无需设置的属性可以省略。但是font-family和font-size 必须保留

文本属性

1.文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
    
            /* color: deeppink; */
            /* color: #ff0000; */
            color: rgb(255,0,255);
    }

    </style>
</head>
<body>
    <div>>>>>????????>>>>>>>></div>
</body>
</html>

在这里插入图片描述
2.对齐文本

左对齐
居中对齐
右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
    
            /* 本质是让盒子里的内容居中对齐 */
            text-align: center;
        }
        h2 {
    
            text-align: left;
        }
        h3 {
    
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
    <h2>左对齐的标题（默认）</h2>
    <h3>右对齐的标题</h3>
</body>
</html>

3.装饰文本

下划线 underline
划线 line-through
上划线 overline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
            /* 默认为没有线 为none */
            /* text-decoration: underline; */
            /* text-decoration: overline; */
            text-decoration: line-through;
        }
        a {
    
            /* 取消默认的下划线 */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 装饰文本就是往里加线，下划线上划线之类 -->
    <div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈.</div>
    <a href="#">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</a>
</body>
</html>

4.缩进文本

em是一个相对单位，就是当前元素一个文字的大小，若没有设置当前元素大小，则会按照父元素一个文字的大小显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
    
            /* 表示文本第一行缩进的距离 */
            /* text-indent: 20px; */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>hauifhuefihwelfhaweljkhaklerjaiuer</p>
    <p>sgfwehjgerhjgejhruysdfergjhhhhhhh
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdfvkhsreuer</p>
    <p>ergdfjvgerriuerhgdfbjhdfkjjkekljrguiowejklfkl</p>
</body>
</html>

5.行间距
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
    
            line-height: 16px;
        }
    </style>
</head>
<body>
    <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdfvkhsreuer
        ddddddddddddddddddddd
    </p>
    <p>dfjkkkkkkkkkkkkkkkkkkkkkkkkkkkksse</p>
    <p>ueuwhsklfhsekjhweiu</p>
</body>
</html>

引入方式

1.内部样式表
是写到html页面内部，是将css代码抽取出来放到style标签内部的样式表（与之前学的内容相同）
ps：
1.理论上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div {
    
            /* color: deeppink; */
            /* color: #ff0000; */
            color: rgb(255,0,255);
    }

    </style>
</head>
<body>
    <div>>>>>????????>>>>>>>></div>
</body>
</html>

2.行内样式表
是在元素标签内部的style属性中设定css样式。适合于修改简单样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: pink;">青春不常在，青春不常在</p>
</body>
</html>

ps：
1.style其实就是标签属性
2.记得要在双引号中使用，写法要符合css规范
3.可以控制当前标签设置样式

3.外部样式表
适用于样式比较多的情况，核心是样式单独写到css文件中，之后将css文件引入到html页面中使用

通过标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    	<link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>标题一共六级选</h1>
    <h1>文字加粗一行显</h1>
    <h1>由大到小依次减</h1>
    <h1>从重到轻随之变</h1>
    <h1>语法规范书写后</h1>
    <h1>具体效果刷新见</h1>
</body>
</html>

/* 文件内只有样式没有标签 */
h1 {
   
    color: pink;
}

语法

1.emmet语法
在这里插入图片描述

    <style>
        .one{
   
            text-align: center;
            /* w100; */
            width: 100px;
            /* lh26px */
            line-height: 26px;
        }
    </style>

每个单词的首字母和enter可以快捷生成相应样式

2.快速格式化
shift+alt+f 或单击右键选择格式化文档

复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
复合选择器可以更准确更高效地选择目标元素（标签）
复合选择器是由两个或多个基础选择器通过不同的方式组合而成的

常见的复合选择器：
1.后代选择器（重要）
又称包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把ol中的li选出来改为粉色(后代选择器) */
        ol li {
    
            color: pink ;
        }
    </style>
</head>
<body>
    <ol>
        <li>ddddddddddddddd</li>
        <li>ddddddddddddddd</li>
        <li>ddddddddddddddd</li>
    </ol>
    <ul>
        <li>ddddddddddddddd</li>
        <li>ddddddddddddddd</li>
        <li>ddddddddddddddd</li>
    </ul>
</body>
</html>

ps:
元素1和元素2中间用空格隔开
元素一是父级，元素二是子级，最终选择的是元素二

2.子选择器
只能选择最近一级子元素（简称选亲儿子元素）
元素一>元素二（样式声明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">