CSS基础 – Echo小窝

本文最后更新于400 天前，其中的信息可能已经过时，如有错误请发送邮件到echobydq@gmail.com

前言

本文为 CSS 基础笔记

上一篇笔记为：HTML基础 – Echo (liveout.cn)

CSS

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css

基础认知

1. 语法规则

css写在style标签中，style标签一般写在head标签里面，title标签下面

此方法为内嵌式

<!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>CSS语法</title>
    <style>
        /* 注释 */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p1{
            /* 文字颜色 */
            color: red;
            /* 字体 px：像素 */
            font-size: 30px;
            /* 背景色 */
            background-color: aqua;
            /* width height */
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p1>p1红色字体标签</p1>
</body>
</html>

2. 引入方式

内嵌式 ：css 写在 style标签中

注意：style标签通常写在head标签中
外联式：css 写在一个单独的 .css 的文件中

注意：需要通过link标签在网页中引入
行内式：css 写在标签的 style 属性中

注意：配合js使用

引入方式	书写位置	作用范围	使用场景
内嵌式	css 写在 style标签中	当前页面	小案例
外联式	css 写在一个单独的 .css 的文件中	多个页面	项目中
行内式	css 写在标签的 style 属性中	当前标签	配合js使用

<!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>引入式</title>
    <!-- stylesheet：关系为样式表 -->
    <link rel="stylesheet" href="引入式.css">
</head>
<body>
    <!-- 外联式：p1 -->
    <p1>p1标签</p1>
    <!--  行内式-->
    <div style="color: green; font-size: 20px;">div标签</div>
</body>
</html>

/* 选择器 {} */
p1{
    color: red;
}

基础选择器

1. 标签选择器

➢结构：标签名 { 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>基础选择器</title>
    <style>
         /* 定义基础选择器 */
        p {
            color: red;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

2. 类选择器

➢结构: .类名{ css属性名 : 属性值; }

➢作用:通过类名，找到页面中所有带有这个类名的标签，设置样式

➢注意点:

所有标签上都有class属性, class属性的属性值称为类名(类似于名字)
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!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>基础选择器</title>
    <style>
         /* 定义类选择器 */
        .red {
            color: red;
        }

        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类： 定义 和 使用 才能生效 -->
    <p>普通p标签</p>
    <!-- 一个标签可以使用多个类名，需要空格隔开 -->
    <div class="red size">类选择器</div>
    <p class="red">加了class</p>
</body>
</html>

3. id选择器

➢结构：#id属性值 { css属性名 : 属性值; }

➢作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式，配合js制作动态效果

➢注意点:

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<!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>id选择器</title>
    <style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">蓝色div</div>
</body>
</html>

4.通配符选择器

➢结构: * { css属性名 : 属性值; }

➢作用:找到页面中所有的标签，设置样式

➢注意点:

开发中使用极少，只会在极特殊情况下才会用到
小页面中可能会用于去除标签默认的margin和padding (后续讲解)

<!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>通配符</title>
    <style>
         /* 定义通配符选择器 */
        * {
            color:red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <h1>h1</h1>
    <span>span</span>
</body>
</html>

字体和文本样式

1. 字体样式

字体大小：font-size 谷歌默认16px
字体粗细：font-weight 正常normal/400 加粗blod/700
字体样式：font-style 倾斜 italic
字体类型：font-family
字体类型：font属性连写

<!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>字体样式</title>
    <style>
        p {
            /* font-size: 18px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Lucida Sans', 'Lucida Sans Regular',  sans-serif; */

            /* font: style  weight  size  字体; */
            font: normal 700 66px 宋体;
            /* font: 66px 宋体; 省略style、weight为默认 */
            font-style: italic;


            /* 一个属性冒号后面书写多个值：复合属性 */
        }
    </style>
</head>
<body> 
    <p>Hello World</p>
</body>
</html>

2. 文本样式

文本缩进：text-indent (1)数字+px (2) 数字+em (推荐：1em =当前标签font-size大小)
文本对齐方式：text-align left左对齐 center居中对齐 right右对齐
文本修饰：text-decoration
1. underline：下划线(常用)
2. line-through：删除线(不常用)
3. overline：上划线(几乎不用)
4. none：无装饰线(常用)
注意：开发中使用 text-decoration : none; 清除a标签默认的下划线

<!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>文本样式</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进两个字大小 */
            text-indent: 2em;
            text-decoration: none;
        }

        h1 {
            text-align: left;
            text-align: right;
            text-align: center;
        }

        body {
            text-align: center;
        }

        /* 文本修饰 */
        div {
            text-decoration: underline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>拣爱--Love Choice</h1>

    <img src="https://yy.liveout.cn/article/essay/life/2023/spring/jianai.png" alt="love choice">

    <p>前女友分手的时候告诉我这个游戏的，认识7年，因为不合适分开，无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人，不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起，
所以英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。</p>


        <!-- 文本修饰 -->
        <div>div</div>
        <p>ppp</p>
        <h2>h2</h2>
        <h3>上划线</h3>
        <a href="https://www.liveout.cn" target="_blank">我是一个超链接</a>
</body>
</html>

3. 行高

line-height：控制一行的上下间距

取值：

数字+px
倍数（当前标签font-size的倍数）

应用：

让单行文本垂直居中可以设置line-height :文字父元素高度
网页精准布局时，会设置line-height: 1可以取消上下间距

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font: style weight size/line-height family ;

<!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>行高</title>
    <style>
        p {
            font-weight: 600;
            font-family: 宋体;
            line-height: 50px;

            /* 60px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 30px/2 宋体;
        }
    </style>
</head>
<body>
    <p>前女友分手的时候告诉我这个游戏的，认识7年，因为不合适分开，无疾而终。 她跟我说”就连游戏我都得重来三次才能正确地爱一个人，不合适是没有办法的。”故事的结局在相遇的时候就定好了所以周芷若就算跟张无忌要结婚了也在不了一起，
        所以英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。</p>
</body>
</html>

拓展

1. 颜色取值

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、 blue、 yello…..
rgb表示法	红绿蓝三原色。每项取值范围: 0~255	rgb(0,0,0)、rgb(255,255,255)、 r2550….
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba(255,255,255,0.5)、rgba(255,0,0,0.3….
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#f0000、 #e92322, 简写: #000、 #f00

2. 标签水平居中

方法总结：margin : 0 auto

让 div、p、h(大盒子) 水平居中：通过 margin : 0 auto ; 实现，其中 0 为上下间距，auto 为左右间距

注意：

如果需要让div、 p、h (大盒子) 水平居中，直接给当前元素本身设置即可
margin: 0 auto -般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

<!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>标签水平居中</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例

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>新闻</title>
    <style>
        div {
            width: 800px;
            height: 600px;
           margin: 0 auto;
        }

        /* 类选择器 */
        .center {
            text-align: center;
        }

        .color1 {
            color: #808080;
        }

        .color2 {
            color: #87ceeb;
            font-weight: 700;
        }

        a {
            text-decoration: none;
        }

        /* 段落内容首行缩进 */
        .suojin {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1">2077年01月28日14:58 </span>
            <span class="color2">新浪科技</span>
            <a href="https://liveout.cn">收藏本文</a>         
        </p>
        <hr>
        <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
        <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
    </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>产品</title>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff; 
            margin: 0 auto;
            text-align: center;
        }

        img {
            width: 160px;
        }

        .title {
            font-size: 14px;
            line-height: 25px;
        }

        .info {
            font-size: 12px;
            line-height: 30px;
            color: #ccc;
        }

        .price {
            font-size: 14px;
            color: #ffa500;
        }

    </style>
</head>
<body>
    <!-- div 用来网页布局，一个页面可能用无数次 -->
    <!-- 如果使用 div，尽量使用类名控制样式 -->
    <div class="goods"><img src="car.jpg" alt="小米平衡车">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="price">1999元</div>
</div>
</body>
</html>

Echo

···重度精神内耗患者···

前言

基础认知

1. 语法规则

2. 引入方式

基础选择器

1. 标签选择器

2. 类选择器

3. id选择器

4.通配符选择器

字体和文本样式

1. 字体样式

2. 文本样式

3. 行高

拓展

1. 颜色取值

2. 标签水平居中

案例

1. 新闻

2. 产品

评论

发送评论(请正确填写邮箱地址，否则将会当成垃圾评论处理) 编辑评论

2024 年 4 月
一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

前言

基础认知

1. 语法规则

2. 引入方式

基础选择器

1. 标签选择器

2. 类选择器

3. id选择器

4.通配符选择器

字体和文本样式

1. 字体样式

2. 文本样式

3. 行高

拓展

1. 颜色取值

2. 标签水平居中

案例

1. 新闻

2. 产品

评论

发送评论(请正确填写邮箱地址，否则将会当成垃圾评论处理) 编辑评论

推荐文章