• CSS【基础】

    目录

    一、CSS的介绍

    二、CSS语法规则

    三、CSS引入方式

    四、CSS的基础选择器

    五、CSS属性:  字体font

    六、CSS属性：文本text

    七、CSS属性：颜色

    八、样式层叠问题

    九、谷歌浏览器的调试工具

    十、拓展：标签(盒子)水平居中的方法

    一、CSS的介绍

    1.什么是CSS?

    CSS是 层叠样式表(Cascading Style Sheets) 的缩写，是页面美化的一种编程语言

    2.CSS作用是什么?

    给页面中的HTML标签设置样式进行美化

    二、CSS语法规则

    1.CSS写在哪里？

    CSS写在标签中,或者CSS文件中，或者HTML的style属性里

    2.CSS的书写格式(常用)

    CSS选择器 {

    CSS属性 : 属性值 ;

    ······

    }

    三、CSS引入方式

    1.内嵌式

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     
    8. <style>
    9.     p {
    10.         color : red;
    11.     }
    12. style>
    13.     
    14. head>
    15. <body>
    16.     <p>css初体验p>
    17. body>
    18. html>

    2.外联式

    另创一个.css文件，专门写css，然后html文件引入css文件

    然后通过link标签引入

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     
    8.     <link rel="stylesheet" href="css文件名.css">link>
    9.     
    10. head>
    11. <body>
    12.     <p>css初体验p>
    13. body>
    14. html>
    15. p {
    16.     color : red;
    17. }

    3.行内式

    写在标签的style属性中

    一般配合js使用

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <p style="color:red;">css初体验p>
    10. body>
    11. html>

    四、CSS的基础选择器

    选择器的作用：选中页面中对应的标签（定位标签）

    1.标签选择器

    概念：标签选择器就是以标签名命名的选择器

    结构：标签名 { }

    作用：通过标签名选中页面中所有这类标签

    2.类选择器

    概念：类选择器就是以类名命名的选择器

    结构：.类名 { }

    作用：通过类名，选中页面中所有带有这个类名的标签

    知识补充：类(class)

    类（class）是html标签的一个属性，它的属性值是一个类名

    相当于给这个标签起了一个名字

    格式： class = "类名"

    通常给css使用，用于做美化工作

    温馨提示:·

    1.由于是代表名字，所以不同标签类名可以相同

    2.一个标签可以有多个名字，所以可以有多个类名

    格式：class = "类名1 类名2"

    3.类名要遵循标识符规则

    3.id选择器

    概念：id选择器就是以id名命名的选择器

    结构：#id名 { }

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

    知识补充: id

    id是html标签的一个属性，它的属性值是id名

    相当于给标签起了一个独一无二的id

    格式：id = "id名"

    通常给js使用，不做美化工作

    温馨提示:·

    1.由于是代表独一无二id，所以不同标签id名不可以相同

    2.一个标签只可以有一个id

    3.id名要遵循标识符规则

    4.通配符选择器

    概念：通配符选择器就全选选择器

    格式：* { }

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

    常用来用来去除标签默认的margin和padding(后面学习)

    五、CSS属性：字体font

    1.字体样式

    属性名: font-style

    属性值：

    正常：normal

    倾斜：italic

    1. * {
    2.     font-style: normal;
    3.     font-style: italic;
    4. }

    2.字体粗细

    属性名: font-weight

    属性值:

    1.关键字

    正常：normal

    加粗：bold(bou的)

    2.数字(常用)

    正常：400

    加粗：700

    1. * {
    2.     font-weight: normal;
    3.     font-weight: bold;
    4.     
    5.     font-weight: 400;
    6.     font-weight: 700;
    7. }

    3.字体大小

    属性名: font-size

    属性值：数字+px

    注意：谷歌浏览器默认16px大小字体

    1. * {
    2.     font-size: 20px;
    3. }

    4.字体类型

    属性名：font-family

    属性值：具体字体1，具体字体2，具体字体3，······

    具体字体例

    微软雅黑、黑体、宋体、楷体·······

    渲染规则：从左往右顺序查找电脑安装的字体

    温馨提示：开发时，尽量选择系统常见自带的字体

    1. * {
    2.     font-family: 微软雅黑,黑体,宋体;
    3. }

    5.字体复合属性

    属性名：font

    属性值：style值 weight值 size值 family值

    温馨提示：可以省略前两个，省略的为默认值，size/后面乘以对应的行高倍数来设置行高

    1. * {
    2.     font: italic 700 10px 宋体;
    3.     font: 19px 微软雅黑;
    4.     font: 16px/1.5 "Helvetica Neue", "Helvetica", "Arial", "Microsoft Yahei";
    5. }

    六、CSS属性：文本text

    1.文本(首行)缩进

    属性名：text-indent

    属性值：

    1.数字+px(需要参考font-size的px)

    2.数字+em (推荐使用: 1em = 当前标签的font-size的大小)

    1. * {
    2.     text-indent: 50px;  如果font-size是50px则表示缩进1个字符
    3.     
    4.     text-indent: 2em;   缩进2个字符
    5. }

    2.文本水平对其方式

    属性名：text-align

    属性值：

    左对齐：left

    居中对其：center

    右对齐：right

    温馨提示：如果需要让文本(p\h\div)水平居中，text-align属性给文本所在标签设置

    1. * {
    2.     text-align: left;
    3.     text-align: center;
    4.     text-align: right;
    5. }

    3.text-align： center 还能能让哪些元素水平居中?

    注意：如果需要让以下元素水平居中，需要给以上元素的父元素设置

    • input标签、span标签、img标签、a标签

    1. <div>
    2.     <span>水平居中span>  需要给div设置，给span设置无效果
    3. div>
    4. <div class="gg">
    5.     <div ckass="dd">
    6.         <span>水平居中span>  需要给gg和dd设置都可以，给span设置无效
    7.     div>
    8. div>

    3.文本装饰

    属性名：text-decoration

    属性值

    无装饰线：none

    下划线：underline

    删除线：line-through

    温馨提示：开发中经常使用text-decoration: none 来清除a标签的下划线

    1. * {
    2.     text-decoration: none;
    3.     text-decoration: underline;
    4.     text-decoration: line-through;
    5. }
    6. ​
    7. a {
    8.     text-decoration: none;
    9. }

    4.文本行高

    属性名：line-height

    属性值

    1.数字+px

    2.倍数(当前标签font-size的倍数)

    温馨提示：行高一般用于让内容垂直居中，开发中可以使用line-height: 1 取消上下间距

    行高

    行高由上间距+文字高度+下间距组成

    文字高度是保持不变的，在变的是上间距和下间距

    1. * {
    2.     line-height: 20px;
    3.     
    4.     line-height: 2;
    5. }

    七、CSS属性：颜色

    1.字体颜色

    属性名：color

    2.背景颜色

    属性名: background-color

    3.两者的属性值

    • 颜色英文单词：red、blue、·····

    • rgb表示：rgb(数字,数字,数字)

    • rgba表示：gba(数字,数字,数字,不透明度数字) a表示透明度，数字在0-1范围内

    • 十六进制法：#十六进制数

    温馨提示：开发中ui设计师会把颜色编号写在旁边，不需要我们去记忆

    1. * {
    2.     color: red;
    3.     
    4.     color: rgb(1,2,3);
    5.     
    6.     color: rgba(1,2,3,0.5);
    7.     
    8.     color: #0000;
    9. ​
    10. }

    八、样式层叠问题

    问题：如果给同一个标签设置了相同的样式，此时浏览器如何渲染？

    结果：覆盖，写在上面的被写在下面的样式覆盖，生效下面的

    1. * {
    2.     color: red;
    3.     color: blue;
    4. }
    5. ​
    6. * {
    7.     color: green;
    8. }

    九、谷歌浏览器的调试工具

    1.排错

    打开页面右击检查

    看到elements这行，表示元素

    左边表示html标签右边表示css样式

    当出现css被划线了，代表该css未被使用

    如果出现黄色三角，则代表该附近css语法错误

    2.调试

    样式那块区域打勾代表使用该样式，可以去掉打勾不使用该样式

    也可以双击属性值，然后修改属性值

    也可以双击属性值，然后按tab换行，换到最后一行可以添加css语句

    这些操作都会使页面发生变化，有助于我们调试

    温馨提示：这些调试修改的样式，是不会改变CSS的代码的，需要我们调试完对应样式后，进入到代码里面修改成需要的

    十、拓展：标签(盒子)水平居中的方法

    属性名：margin

    属性值：0 auto

    1. * {
    2.     margin: 0 auto;
    3. }
  • 相关阅读:
    LinuxC/C++ UDP编程实现DNS客户端
    Speech | 轻量级语音合成论文详解及项目实现
    【Spring连载】使用Spring Data访问 MongoDB（十二）----MongoDB Repositories
    LeetCode 0938.二叉搜索树的范围和：深度优先搜索（可中序遍历）
    正则表达式如何匹配 空字符串““
    linux常用的命令
    Elasticsearch的介绍与安装
    RpcProvider分发rpc服务：socket连接回调和读写事件回调的实现
    安装CentOS7出现dracut:/#……time解决办法
    Miniconda 使用进阶，把它添加到右键菜单中
  • 原文地址：https://blog.csdn.net/weixin_62421736/article/details/133934181