CSS基础

1.选择器

CSS规则由两个主要的部分构成:选择器以及一条或多条声明

1.选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式

2.属性和属性值以"键值对"的形式出现

3.属性是对指定的对象设置的样式属性,例如字体大小,文本颜色等

4.属性与属性值之间用英文":"分开

5.多个键值对之间用英文";"进行区分

标签选择器:

<style>
p{color: red;font-size: 12px;}
</style>


<p>
    这是一个段落
</p>

<style>写在<head>里面,哪一个标签需要,就将哪个标签作为选择器

所有的标签都会被修改

类选择器:

<style>
.green{
    color: green;
}
</style>


<p class="green">
    这是一个段落
</p>

.类名{ }形式

然后哪个标签需要改,就在对应标签里面加上 class="类名",不需要带上" . "

类名别使用纯数字,尽量使用有意义的英文

多类名:

.red{

    background-color: red;
}
.size{
    width: 100px;
    height: 100px;
}


<p class="red size"></p>

class后面可以跟多个类

id选择器:

#pink{
color: pink;
}


<div id="pink">野猪pq</div>

id选择器,将样式上将类选择器的.换成了#

结构上将class=""换成了id=""

两者的区别在于,id选择器只能调用一次,类选择器可以无限调用

通配符选择器:

*{
    color: red;
}

选择器使用*号,当使用时,所有的标签和元素都进行修改样式

2.字体属性

设置字体:

font-family: "字体名","字体名","字体名";

1.可以写多个字体名,当没有前面的字体,就会使用后面有的,字体之间用逗号隔开

2.字体名为多个单词组成的,需要使用引号包起来

设置字号大小:

font-size: 20px;

1.px是像素

2.在<body>标签中使用,会将整篇文章的字体大小进行修改,但是标题不会修改,需要单独修改

设置字体加粗:

font-weight:bold;粗体
font-weight:bolder;特粗
font-weight:lighter;细体
font-weight:700;

数字后面不需要加单位,当在标题标签中,weight设置为400或者为normal,就能让其不变粗

或者使用

<strong>
<b>

文字风格:

font-style="";

值:

倾斜:italic

不倾斜:normal

让倾斜的字体不倾斜

em{
    font-style: normal;
}

字体复合属性:

font:font-style  font-weight  font-size/line-height  font-family;

1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开

2.不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用

3.文本属性

文本颜色:

color:red;

双击颜色值,可以进行选择

|---------|-------------------------------|
| 表示 | 属性值 |
| 预定义的颜色值 | red,green,pink,blue等 |
| 十六进制 | #FF0000,#000000等 |
| RGB代码 | rgb(255,0,0)或rgb(99%,%67,%67) |

对齐方式:

text-align:center;

左对齐:left 右对齐:right 居中对齐:center

文本装饰:

text-decoration :underline;

|--------------|----------|
| 属性值 | 描述 |
| none | 默认,没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |

使用none可以取消下划线

文本缩进:

text-indent:20px;

数字为正向右缩进,为负向左缩进

text-indent:2em;

单位为em,缩进当前文字的像素,几em就缩进几个文字,是相对单位

行间距:

line-height:26px;

4.CSS三大样式表

内部样式表:

内部样式表是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中

<style>
p{color: red;font-size: 12px;}
<style>

1.<style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的<head>标签中

2.通过这种方式,可以方便控制当前整个页面中的元素样式设置

3.代码结构清晰,但是并没有实现结构与样式完全分离

行内样式表:

行内样式表是在元素标签内部的style属性中设定CSS样,适用于修改简单样式

<div style="color: red;"></div>

1.style其实就是标签的属性

2.在双引号中间,写法要符合css规范

3.可以控制当前标签设置样式

外部样式表:

引入外部样式表分为两步:

1.新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中

2.在HTML页面中,使用<link>标签引入这个文件

相关推荐
2401_8827275724 分钟前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder27 分钟前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂38 分钟前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand42 分钟前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL1 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿1 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫1 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256142 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小白学前端6663 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
web130933203983 小时前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端