CSS【基础】

目录

一、CSS的介绍

二、CSS语法规则

三、CSS引入方式

四、CSS的基础选择器

[五、CSS属性: 字体font](#五、CSS属性: 字体font)

六、CSS属性:文本text

七、CSS属性:颜色

八、样式层叠问题

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

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


一、CSS的介绍

1.什么是CSS?

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

2.CSS作用是什么?

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

二、CSS语法规则

1.CSS写在哪里?

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

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

CSS选择器 {

CSS属性 : 属性值 ;

······

}

三、CSS引入方式

1.内嵌式

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

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
<style>
    p {
        color : red;
    }
</style>
    
</head>
<body>
    <p>css初体验</p>
</body>
</html>

2.外联式

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

然后通过link标签引入

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="css文件名.css"></link>
    
</head>
<body>
    <p>css初体验</p>
</body>
</html>
p {
    color : red;
}

3.行内式

写在标签的style属性中

一般配合js使用

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red;">css初体验</p>
</body>
</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

css 复制代码
* {
    font-style: normal;
    font-style: italic;
}

2.字体粗细

属性名: font-weight

属性值:

1.关键字

正常:normal

加粗:bold(bou的)

2.数字(常用)

正常:400

加粗:700

css 复制代码
* {
    font-weight: normal;
    font-weight: bold;
    
    font-weight: 400;
    font-weight: 700;
}

3.字体大小

属性名: font-size

属性值:数字+px

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

css 复制代码
* {
    font-size: 20px;
}

4.字体类型

属性名:font-family

属性值:具体字体1,具体字体2,具体字体3,······

具体字体例

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

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

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

css 复制代码
* {
    font-family: 微软雅黑,黑体,宋体;
}

5.字体复合属性

属性名:font

属性值:style值 weight值 size值 family值

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

css 复制代码
* {
    font: italic 700 10px 宋体;
    font: 19px 微软雅黑;
    font: 16px/1.5 "Helvetica Neue", "Helvetica", "Arial", "Microsoft Yahei";
}

六、CSS属性:文本text

1.文本(首行)缩进

属性名:text-indent

属性值:

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

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

css 复制代码
* {
    text-indent: 50px;  如果font-size是50px则表示缩进1个字符
    
    text-indent: 2em;   缩进2个字符
}

2.文本水平对其方式

属性名:text-align

属性值:

左对齐:left

居中对其:center

右对齐:right

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

css 复制代码
* {
    text-align: left;
    text-align: center;
    text-align: right;
}

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

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

  • input标签、span标签、img标签、a标签
html 复制代码
<div>
    <span>水平居中</span>  需要给div设置,给span设置无效果
</div>
<div class="gg">
    <div ckass="dd">
        <span>水平居中</span>  需要给gg和dd设置都可以,给span设置无效
    </div>
</div>

3.文本装饰

属性名:text-decoration

属性值

无装饰线:none

下划线:underline

删除线:line-through

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

css 复制代码
* {
    text-decoration: none;
    text-decoration: underline;
    text-decoration: line-through;
}
​
a {
    text-decoration: none;
}

4.文本行高

属性名:line-height

属性值

1.数字+px

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

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

行高

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

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

css 复制代码
* {
    line-height: 20px;
    
    line-height: 2;
}

七、CSS属性:颜色

1.字体颜色

属性名:color

2.背景颜色

属性名: background-color

3.两者的属性值

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

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

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

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

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

css 复制代码
* {
    color: red;
    
    color: rgb(1,2,3);
    
    color: rgba(1,2,3,0.5);
    
    color: #0000;
​
}

八、样式层叠问题

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

结果:覆盖,写在上面的被写在下面的样式覆盖,生效下面的

css 复制代码
* {
    color: red;
    color: blue;
}
​
* {
    color: green;
}

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

1.排错

打开页面右击检查

看到elements这行,表示元素

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

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

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

2.调试

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

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

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

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

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

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

属性名:margin

属性值:0 auto

css 复制代码
* {
    margin: 0 auto;
}
相关推荐
也无晴也无风雨29 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui