首页 > 其他分享 >CSS基础

CSS基础

时间:2022-12-01 23:36:13浏览次数:39  
标签:标签 基础 id 字体 font 选择器 CSS 属性

CSS基础

◆ 基础认知
◆ 基础选择器
◆ 字体和文本样式
◆ Chrome调试工具
◆ 综合案例

1.基础认知

1.1 CSS的介绍

➢ CSS:层叠样式表(Cascading style sheets)

➢ CSS作用是什么??

​ • 给页面中的HTML标签设置样式

1.2 CSS 语法规

➢ 写在哪里?

​ • css写在style标签中,style标签一般写在head标签里面,title标签下面

➢ 怎么写?

1.3 CSS 初体验

1.4 CSS 初识-小结

➢ CSS的中文名称叫做什么呢?

​ • 层叠样式表

➢ CSS的作用是什么呢?

​ • 给页面中的HTML标签设置样式

➢ CSS的语法规则是什么?

2.1 CSS引入方式

内嵌式:CSS 写在style标签中

​ • 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中

外联式:CSS 写在一个单独的.css文件中

​ • 提示:需要通过link标签在网页中引入

行内式:CSS 写在标签的style属性中

​ • 提示:基础班不推荐使用,之后会配合js使用

2.2 CSS引入方式-小结

2. 基础选择器

1.1 选择器的作用

➢ 选择器的作用:

​ • 选择页面中对应的标签(找她),方便后续设置样式(改她)

1.2 标签选择器

2. 类选择器

3. id选择器

补充:类与id的区别

➢ class类名与id属性值的区别

​ • class类名相当于姓名,可以重复,一个标签可以同时有多个class类名

​ • id属性值相当于身份证号码,不可重复,一个标签只能有一个id属性值

➢ 类选择器与id选择器的区别

​ • 类选择器以 . 开头

​ • id选择器以 # 开头

➢ 实际开发的情况

​ • 类选择器用的最多

​ • id一般配合js使用,除非特殊情况,否则不要使用id设置样式

​ • 实际开发中会遇到冗余代码的抽取 (可以将一些公共的代码抽取到一个公共的类中去)

4. 通配符选择器

关于选择器的小结:

1. 选择器作用:选中页面中对应的标签(找她),方便后续设置样式(改她)
2. 标签选择器:标签名 { css属性名:属性值; }
3. 类选择器:.类名 { css属性名:属性值; }
4. id选择器:#id属性值 { css属性名:属性值; }
5. 通配符选择器:* { css属性名:属性值; }

3.字体和文本样式

1. 字体样式
1. 字体大小:font-size
2. 字体粗细:font-weight
3. 字体样式:font-style
4. 字体类型:font-family
5. 字体类型:font属性连写
2. 文本样式
3. line-heig

1.1 字体大小

1.2 字体粗细

1.3 字体样式(是否倾斜)

1.4 常见字体系列(了解)

1.5 字体系列 font-family

1.6 样式的层叠问

1.7 字体font相关属性的连写

➢ 属性名:font (复合属性)
➢ 取值:
	• font : style weight size family;
➢ 省略要求:
	• 只能省略前两个,如果省略了相当于设置了默认值
➢ 注意点:如果需要同时设置单独和连写形式
	• 要么把单独的样式写在连写的下面
	• 要么把单独的样式写在连写的里面

1.8 字体相关属性总结

➢ 字体大小: font-size
	• 数字+px
➢ 字体粗细:font-weight
	• 正常:normal 或 400
	• 加粗:bold 或 700
➢ 字体样式:font-style
	• 正常:normal
	• 倾斜:italic
➢ 字体系列:font-family
	• 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
➢ 字体连写:font
	• font : style weight size family;

2.1 文本缩进

2.2 文本水平对齐方式

2.4 水平居中方法总结 text-align : center

2.3 文本修饰

2.4 文本样式总

3.1 行高

测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- css写完也需要保存,然后才能在网页中link到 -->
    <link rel="stylesheet" href="./mycss.css">
    <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>


        /* 注释 */
        /* 这些都是标签选择器
        通过标签名,找到页面中所有这类标签,设置样式
        ➢ 注意点:
            1. 标签选择器选择的是一类标签,而不是单独某一个
            2. 标签选择器无论嵌套关系有多深,都能找到对应的标签 */
        p {
            color: rgb(255, 0, 81);
            /* 文字颜色变红色 */
            color: rgb(255, 234, 0);
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height; */
            width: 400px;
            height: 400px;
        }

        h3 {
            color: aqua;
            font-size: 30px;
            background-color: blue;
            width: 10;
            height: 10;
        }

        /* 这是类选择器
        作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
        ➢ 注意点:
            1. 所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
            2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
            3. 一个标签可以同时有多个类名,类名之间以空格隔开
            4. 类名可以重复,一个类选择器可以同时选中多个标签
        */
        .one {
            color: aqua;
            font-size: 20;
        }

        /* id选择器
        结构:#id属性值 { css属性名:属性值; }
        ➢ 作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
        ➢ 注意点:
                1. 所有标签上都有id属性
                2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!
                3. 一个标签上只能有一个id属性值
                4. 一个id选择器只能选中一个标签 */
        #onely{
            color: blueviolet;
            background-color: aqua;
            font-size: 16px;
            width: 15;
            height: 15;
        }

        /* 测试:
        1. 字体样式
            1. 字体大小:font-size
            2. 字体粗细:font-weight
            3. 字体样式:font-style
            4. 字体类型:font-family
            5. 字体类型:font属性连写
        2. 文本样式
        3. line-height行高
        
        */
        .font_size {
            font-size: 16px;
            /* 700字体加粗,400字体不加粗 */
            font-weight: 700;
            /* 
                • 正常(默认值):normal
                • 倾斜:italic
            */
            font-style: italic;
            /*
            ➢ 属性名:font-family
                ➢ 常见取值:具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
                    • 具体字体:"Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
                    • 字体系列:sans-serif、serif、monospace等……
                ➢ 渲染规则:
                    1. 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
                    2. 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
                ➢ 注意点:
                    1. 如果字体名称中存在多个单词,推荐使用引号包裹
                    2. 最后一项字体系列不需要引号包裹
                    3. 网页开发时,尽量使用系统常见自带字体,保证不同用户浏览网页都可以正确显示

            */
            font-family: 'Courier New', Courier, monospace;
        
        }
        

    </style>
</head>
<body>
    <p>我的作用是测试css的</p>

    <div class="tow">我是H3字体,用的是外部link的CSS</div>

    <div class="one">我是H3字体,我用的是类选择器</div>

    <div id="onely">我是用的是id选择器,一对一的不可复用哦</div>

    <div class="font_size">我是字体大小是16px,粗细是700 </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 {
            width: 800px;
            height: 600px;
            /* background-color: pink; */
            margin: 0 auto;
        }

        /* h1 {
            text-align: center;
        } */

        /* p {
            text-align: center;
        } 后面还有其他的段落, 其他段落不居中 */

        /* 类选择器设置段落居中 */
        .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="#">收藏本文</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>

结果如下:

产品综合案例:

<!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;
        }

        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff;
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }

        img {
            width: 160px;
        }

        /* 产品标题 */
        .title {
            font-size: 14px;
            line-height: 25px;
        }

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

        .money {
            font-size: 14px;
            color: #ffa500;
        }
    </style>

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

标签:标签,基础,id,字体,font,选择器,CSS,属性
From: https://www.cnblogs.com/atao-BigData/p/16943114.html

相关文章

  • 盘点:CSS响应式布局的5种实现方式
    响应式布局:只需要开发一套代码,只需要一套代码使页面适应不同的屏幕。响应式设计通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容; 响应......
  • CSS选择器相关知识
    昨日内容回顾前端与后端概念给用户展示数据及获取用户输入数据的界面即为前端。对数据进行处理及运算的界面即为后端。当使用浏览器作为前端时,需要前后端都遵循HTTP......
  • css 透明度
    .box3{width:200px;height:200px;background-color:yellowgreen;position:a......
  • 前端开发:2、CSS、表单标签补充说明
    前端开发之CSS目录前端开发之CSS一、表单标签补充说明二、CSS层叠样式表三、CSS选择器基本选择器CSS组合选择器分组嵌套属性选择器伪装选择器伪元素选择器四、选择器优......
  • 前端-CSS
    1.CSS层叠样式表CSS层叠样式表主要用来调节html标签的各种样式"""思考:页面都是由HTML构成的,并且页面上有很多相同的HTML标签,但是相同的HTML标签在不同的位置可能有不......
  • CSS层叠样式表
    目录CSS前戏1.css语法结构2.css注释语法3.引入css的多种方式CSS基本选择器1.标签选择器2.类选择器3.id选择器4.通用选择器CSS组合选择器CSS前戏主要用来调节html标签的各......
  • 表单标签补充及css层叠样式
    表单标签补充及css层叠样式一、表单知识点补充1.获取用户输入的标签两大重要属性name属性:类似于字典的键value属性:类似于与字典的值#form表单朝后端发送数据的时候,标......
  • 前段知识之CSS
    目录CSS层叠样式表CSS选择器选择器优先级CSS样式调节CSS层叠样式表主要用来调节html标签的各种样式思考:页面都有HTML构成的并且页面上有很多相同的HTML标签但是相同的......
  • 前端(css)基础
    内容概要css选择器css层叠样式表(CascadingStyleSheets)css主要是用来调节HTML标签的各种样式/*我们现在的网页页面都是由HTML构成的,并且上面由很多相同的HTML标......
  • Web前端开发:CSS层叠样式表
    目录CSS层叠样式表-html标签的两大重要属性1.class属性2.id属性一、CSS语法结构1.语法结构2.CSS注释语法3.引入CSS的多种方式(1)嵌入式(2)外链式(3)内联样式二、CSS选择器1.CSS基......