CSS基础

qq_40832034

已于 2023-02-20 13:19:28 修改

阅读量302

点赞数 1

文章标签： css

于 2022-04-14 21:56:55 首次发布

本文链接：https://blog.csdn.net/qq_40832034/article/details/124180919

版权

前端学习专栏收录该内容

37 篇文章 1 订阅

订阅专栏

1、CSS基础认知

(1)CSS的介绍

CSS：层叠样式表
CSS作用：给页面中的HTML标签设置样式

(2)语法规则

写在哪里？
css写在style标签中，style标签一般写在head标签里面，title标签下面
在这里插入图片描述

（3)常见属性

在这里插入图片描述

注意：
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，最后需要写分号
大小都要以px结尾

<style>
        p{
            color: blue;
            font-size: 30px;
            background-color: aqua;
            width: 400px;
            height: 300px; 
        }
    </style>

(4)引入方式

内嵌式：CSS 写在style标签中（见上）
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式：CSS 写在一个单独的.css文件中
提示：需要通过link标签在网页中引入

<link rel="stylesheet" href="xin.css">

行内式：CSS 写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用

<body>
    <p style="color: aquamarine;">这是p</p>
</body>

CSS常见三种引入方式的特点区别有哪些（书写位置、作用范围、使用场景）

2、基础选择器

（1）标签选择器

作用：选择页面中对应的标签（找她），方便后续设置样式（改她）
结构：标签名 { css属性名：属性值； }

注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签

（2）类选择器

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
结构：.类名 { css属性名：属性值； }

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

<style>
        .one{
            color: brown;
        }
    </style>

<body>
    <p class="one">这是</p>
    <p >这是</p>
</body>

在这里插入图片描述

（3）id选择器

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
结构：#id属性值 { css属性名：属性值； }

注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3.一个标签上只能有一个id属性值
4 一个id选择器只能选中一个标签

<style>
        #one{
            color: brown;
        }
    </style>

<body>
    <p id="one">这是</p>
    <p >这是</p>
</body>

在这里插入图片描述

(4)通配符选择器

作用：找到页面中所有的标签，设置样式
结构：* { css属性名：属性值； }

极少用到，可能会用于去除标签默认的margin和padding

*{
            color: brown;
        }

    <p>这是</p>
    <p >这是</p>
    <div>lllll</div>
    <span>22222</span>

在这里插入图片描述

3、字体和文本样式

（1）字体样式

属性名：font-size
取值：数字 + px
(谷歌浏览器默认文字大小是16px)

字体粗细：font-weight

属性名：font-weight
取值：
• 关键字：
正常 normal
加粗 bold
• 纯数字：100~900的整百数：
正常400
加粗 700
➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。

字体样式：font-style(是否倾斜）

属性名：font-style
取值：
正常（默认值）normal
倾斜 italic

字体类型：font-family
样式的层叠问题

问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

字体类型：font属性连写

属性名：font (复合属性)
➢ 取值：
• font : style weight size family;
➢ 省略要求：
• 只能省略前两个，如果省略了相当于设置了默认值

font:100px 微软雅黑

➢ 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

p{
            font:italic 700 66px 宋体;  /*顺序不能换*/
            font-style: normal;   /*结果不倾斜 */
        }

（2）文本样式

文本缩进：text-indent

属性名：text-indent
取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）

文本水平对齐方式：text-align

属性名：text-align
取值：左对齐 left；居中对齐 center；右对齐right
注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
（如图片img要对body操作，段落要对p 操作)

 <style>   
        body{
            text-align: center;
        }
    </style>

<body>
    <img src="../1.jpg" >  
</body>

在这里插入图片描述

文本修饰：text-decoration

属性名：text-decoration

开发中会使用 text-decoration : none ; 清除a标签默认的下划线

（3）line-height行高

作用：控制一行的上下行间距

➢ 属性名：line-height

➢ 取值：
• 数字+px
• 倍数（当前标签font-size的倍数）

行高与font连写的注意点：
font : style weight size/line-height family; /倾斜加粗大小/高度字体/

4、Chrome调试工具

打开方式：右键检查/F12
控制样式：修改属性值，添加属性（鼠标放在最后一个属性上Tab）
特殊情况：出现删除线（重复或者被注释）；出现小黄三角（有错）

5、标签水平居中

方法总结 margin : 0 aut

如果需要让 div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

<style>
        div{
            width: 30px;
            height: 30px;
            background-color: blue;
            margin: 0 auto;
        }
    </style>

6、综合案例–新闻

div是一个块
span标签的作用:组合文档中的行内元素。
p一行太长可以查看自动换行

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

在这里插入图片描述

7、综合案例–产品

<!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>
        body{
            background-color: #f5f5f5;  /*错写成color*/       
        }
        .goods{
            width: 234px;
            height: 300px;
            background-color: #ffffff;    /*错写成color*/   
            margin: 0 auto;       /*盒子居中*/
            text-align: center;   /*内容居中，里面的字、图都不用再写居中了*/
        }
        img{
            width: 160px;          
        }
        .p1{           
            line-height: 25px;
            font-size: 14px;
        }
        .p2{           
            line-height: 30px;
            font-size: 12px;
            color: #cccccc;
        }
        .p3{            
            font-size: 14px;
            color:#ffa500;
        }      
    </style>
</head>
<body>
    <div class="goods">
        <img src="./car.jpg">
        <div class="p1">九号平衡车</div>
        <div class="p2">成年人的玩具</div>
        <div class="p3">1999元</div>    /*div没有换行，p有*/
    </div>
    
</body>
</html>

在这里插入图片描述

qq_40832034

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

1、CSS基础认知(1)CSS的介绍CSS：层叠样式表CSS作用：给页面中的HTML标签设置样式(2)语法规则写在哪里？css写在style标签中，style标签一般写在head标签里面，title标签下面（3)常见属性注意：CSS 标点符号都是英文状态下的每一个样式键值对写完之后，最后需要写分号大小都要以px结尾<style> p{ color: blue; font-size: 30px;
复制链接

扫一扫

专栏目录