【CSS001】CSS基础入门总结

最新推荐文章于 2024-09-12 15:53:16 发布

Commas.KM

最新推荐文章于 2024-09-12 15:53:16 发布

阅读量732

点赞数 1

分类专栏： CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_35844043/article/details/120844108

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

日期：2021年10月24日
作者：Commas
签名：一分耕耘，一分收获……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关CSS的知识，那么请点《CSS学习的奇妙之旅》

一、CSS语法规范

CSS规则由两个主要部分构成：选择器 + 一条或多条声明

二、CSS选择器

CSS选择器的作用：根据不同需求把不同的标签选择出来，后续我们就可以对选择出来的标签进行样式设置。

CSS选择器大致可分为两大类，如下图所示：
在这里插入图片描述

（1）基础选择器

基础选择器	作用	示例	说明
标签选择器	可以选出所有相同标签	`p {color:red}`	p标签字体显示红色
类选择器	可以选出1个或多个标签	`.className {color:red}`	类名为`className`的所有标签字体显示红色
id选择器	一次只能选择1个标签，并且HTML文档中只能出现一次ID属性	`#idName {color:red}`	id为`idName`的一个标签字体显示红色
通配符选择器	选择所有的标签	`* {color:red}`	所有标签字体都显示红色

（i）标签选择器

标签选择器也成为也称为元素选择器;

语法：elementNaime {...}，其中elementName为HTML中的标签名称；
作用：将elementName的标签全部选择出来；
优点：能快速在页面中给同一种标签统一设置样式，如所有的div标签；

（ii）类选择器

语法：className {...}，其中className为类名；
作用：将类名为className的标签全部选择出来；
优点：能快速在页面中给同一类标签统一设置样式，如red类，orange类；

（iii）id选择器

语法：idName {...}，其中idName为id名称；
作用：将一个id为idName的标签选择出来；
优点：能快速在页面中给某个标签设置样式，如p001、p2、d1、d002等元素；

（iv）通配符选择器

语法：* {...}
作用：将所有的标签全部选择出来；
优点：能快速在页面中给所有标签统一设置样式；

（2）复合选择器

复合选择器：由两个或多个基础选择器，通过不同的方式组合而成的；

复合选择器	作用	示例	说明
后代选择器	可以选出后代元素，子孙元素都可以	`div p {color:red}`	div 下的子孙p标签字体显示红色
子代选择器	可以选出最近一级子元素，不含孙元素	`div>p {color:red}`	div 下的亲子p标签字体显示红色
并集选择器	选择某些相同样式的元素	`div,p {color:red}`	div和p标签的字体都显示红色
伪类选择器 `链接`	选择不同状态的链接	`a:hover {color:red}`	鼠标悬停a标签显示红色字体
伪类选择器 `:focus`	选择获得光标的表单	`input:focus {color:red}`	焦点input的字体显示红色

（i）后代选择器

语法：基础选择器1 基础选择器2 {...}，基础选择器可以更多，不限于2个；
作用：在基础选择器1下的**所有子孙元素（不包含孙元素）**中，再按基础选择器2选出元素；

（ii）子代选择器

语法：基础选择器1>基础选择器2 {...}，基础选择器可以更多，不限于2个；
作用：在基础选择器1下的所有亲子元素中，再按基础选择器2选出元素；

（iii）并集选择器

语法：基础选择器1,基础选择器2 {...}，基础选择器可以更多，不限于2个；
作用：基础选择器1选择出的元素+基础选择器2选择出的元素，为他们定义相同样式，通常用于集体声明；

（iv）伪类选择器

语法：基础选择器：伪类名，伪类选择器最大的特点就是用冒号（:）表示，如：hover、：focus、：first-chird；

三、CSS字体属性

**文本属性**可以定义字体的大小、字体系列、粗细以及文字样式等等。

属性	表示	说明
`font-size`	字体大小	16px，表示字体大小16px，单位一定要写
`font-family`	字体名称	`'Microsoft yahei'`，表示字体使用微软雅黑
`font-weight`	字体粗细	`400`（细）~`700`（粗），切莫加单位；另外也可以用`normal`和`bold`表示
`font-style`	字体样式	倾斜`italic`，正常`normal`
`font`	字体连写的方法	`italic 400 16px 'Microsoft yahei'`，得按顺序来，并且字体大小和字体名称必须同时出现

（1）字体大小

定义字体的大小；

语法：选择器 { font-size: value; }
说明：Google（谷歌）浏览器默认字体大小为16；因为不同浏览器的默认字体大小可能会存在差异，所以我们最好给字体一个明确值，确保显示一致；

（2）字体名称（字体系列）

文本的字体系列，如宋体、微软雅黑等等，通常我们会用英文标识，以求更高的兼容性；

语法：选择器 { font-family: value; }
说明：尽量采用系统默认自带字体，以确保任何用户浏览器可以正常显示；

（3）字体粗细

定义字体的大小；

属性值	说明
`normal`	不加粗（默认值）
`bold`	加粗
`100-900`	`400`相当于`normal`；`700`相当于`bold`，值得注意的是，数字后面不要加单位

语法：选择器 { font-weight: value; }

（4）字体样式

定义字体风格，正常或斜体；

属性值	说明
`normal`	正常的字体样式（默认值）
`italic`	显示斜体

语法：选择器 { font-style: value; }

（5）字体

将以上字体属性全部写到一起，节约代码

语法：选择器 { font: font-style font-weight font-size/line-height font-family; }
说明：
1、font属性之间用一个空格间隔开来，最后才加一个英文分号;；
2、必须按照这个顺序来书写；
3、可以省略一些属性，但是font-size和font-family必须保留；

四、CSS文本属性

字体属性可以定义文本的外观，如文本颜色、对齐方式、装饰文本、文本缩进、行间距等等。

属性	表示	说明
`color`	文本颜色	`#fff`表示字体为白色
`text-align`	文本对齐	文本水平对齐的对齐方式
`text-indent`	文本缩进	通常用于段落行首缩进2个字的距离，如`2em`
`text-decoration`	文本修饰	`underline`:添加下划线；`none`取消下划线:
`line-height`	文本行高	控制行与行之间的距离

（1）文本颜色

颜色的表示方法有很多种，现在列举出比较常见的几种，如下：

颜色表示方法	属性值
预定义的颜色值	`red`、`green`、`blue`等等
十六进制	`#FFFFFF`、`#123123`等等
`rgb`	`rgb(255,0,255)`, rgb(100%,0,100%)
`rgba`	`rgba(255,0,255,0.2)`

语法：选择器 { color: value; }

（2）文本对齐

文本内容的水平对齐方式，如下：

属性值	说明
`left`	左对齐（默认值）
`center`	居中对齐
`right`	右对齐

语法：选择器 { text-align: value; }

（3）文本缩进

用于指定文本的第一行的缩进，通常用于段落的首行缩进；

语法：选择器 { text-indent: value; }
说明：em是一个相对单位，相当于当前元素（font-size）1个文字的大小；

（4）文本修饰

给文本添加下划线、上划线以及删除线等，如下：

属性值	说明
`none`	没有装饰线（默认值）
`underline`	下划线
`overline`	上划线
`line-through`	删除线

语法：选择器 { text-decoration: value; }

（5）文本行高

用于设置行间的距离（行高），可以控制文字行与行之间的距离。通常用来实现文字的垂直居中

语法：选择器 { line-height: value; }

五、CSS的引入方式

在这里插入图片描述

（1）行内样式表

在元素标签内部的style属性中设定CSS样式，适合用于修改简单样式，样式修改权重高；
在这里插入图片描述

（2）内部样式表

样式写在<style>标签内，该标签写在html页面内部，一般写在<head>标签中，代码结构清晰，但未做到结构和样式完全分离；
在这里插入图片描述

（3）外部样式表

样式单独写到CSS文件中，然后再把CSS文件通过<link rel="stylesheet" href="style.css">方式引入到HTML页面中使用，该标签一般置于<head>标签中，实现了结构和央视的完全分离，实际开发一般使用外部样式表；
在这里插入图片描述

六、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>
        body {
            font-size: 16px;
        }

        .container {
            text-align: center;
            background-color: gainsboro;
            margin: 20px 10% 0;

            /* 圆角 */
            border-radius: 10px;
        }

        .container>div {
            height: 40px;
            line-height: 40px;
        }

        .container>div>input {
            height: 25px;
            width: 250px;
            border-color: gainsboro;
            
            /* 圆角 */
            border-radius: 10px;
        }

        .container>div>input:focus {
            border-color: blue;
        }

        .container>div>input:hover {
            border-color: rgb(191, 191, 255)
        }

        .bottom>a:link {
            color: black;
            text-decoration: none;
        }

        /* .bottom>a:visited {} */
        .bottom>a:hover {
            color: orange;
        }

        #login {
            margin: 10px 10% 0;
            background-color: #4e6ef2;
            color: #fff;

            /* 圆角 */
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="userid">账号: <input type="text"></div>
        <div class="psw">密码: <input type="text"></div>
        <div id="login">登 录</div>
        <div class="bottom">
            <a href="#">注册账号</a>
        </div>
    </div>
</body>

</html>