初识css 与文本背景样式

最新推荐文章于 2024-08-21 11:04:16 发布

努力的小贵

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量60

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_74024470/article/details/130648453

版权

html-->写东西给别人看的

css-->找到html写出来的东西，再给他加上特效

1.这么找

2.加什么

css-->层叠样式表-->用来对网页进行排版，美化外观，优化性能

文本 --- 字体，大小，颜色，缩进

图片 --- 宽高，边框，颜色，透明

html: 身体 css：化妆品

网页文件的后缀：.html

样式表的后缀：.css

css注释写法

/* 注释内容 */

/* 多喝热水 */

css选择器

css的工作分两步：1.找到元素 2.加样式

选择器是帮助我们找到元素的一种方式，通过选择器找到对应的标签元素

1.标签选择器：选择一个标签（一个网页里的所有该标签）主要是用来清除/设置默认样式

标签名{

属性：值

}

color:#096;

font-size:70px;

}

2.id选择器：先给标签设置id名，然后通过#id名的方式找到改标签，id相对于身份证，是唯一的，不要给多个标签设置重复id

语法格式：

<标签名 id="id名“>

#id{

属性：值；

}

#hot{

color:red;

font-size:20px;

}

3.class选择器：先给标签设置class类名/类型，然后通过.class名的方式找到改标签。class为类型，可以有多个,id只能有一个

语法格式：

<标签名 class="类名“>

.类名{

属性：值;

}

.money{

color:gold;

font-size:30px;

}

可以给多个标签设置类名，属性会同时生效

4.通配符选择器（*）：通配符选择器用*号表示，表示网页里的所有元素（正式开发不用）

语法格式：

属性：值；

}

color:6cf;

font-size:50px;

}

相对来说class用得最多

标签选择器一般是用来清除样式/设置默认样式

一个网页，我不想用a的样式/换个样式，就可以用标签选择器全选，去除

css样式的三种写法

style：样式

1.内部样式表 -->把样式写在style标签中，style标签写在head里的

语法格式：

<head>

<style>

css代码

</style>

</head>

2.外部样式表 -->把css 代码写在一个专门的.css文件里需要使用的时候用link标签导入内似与python模块

写好css文件后,在head 里用link标样式

3.行内样式表 -->通过标签属性style.直接吧样式写在标签里

<标签名 style="属性：值；属性：值‘>

样式表优先级参考就近原则

行内样式表：

优点：写起来方便

缺点：灵活性不强

内部样式表：

优点：写起来方便

缺点：可复用性不强

外部样式表：

优点：可复用性

缺点：需要导入

div盒子标签

主要是用来做布局使用，本身没有属性，样式，含义,可以做布局使用，把对应内容写在里面

width:宽度

height：高度

文本样式

span标签是一个文本标签，他没有特别的样式/属性，很单纯，适合用来夹文本样式

1.color:

color:blue;

color：#096;

color:rgb(70,130,200)

颜色的三种写法：

1.直接写预设好的颜色单词

gold red pink

2. 用十六进制颜色

#096 #6cf

3.用rgb来设置颜色rgb

rgb(255,255,255)#白色

rgb(0,0,0)#黑色

1.font-size:字体大小（px像素 em字符大小）

font-size:70px;

font-size:2em;

2.font-family:设置字体（宋体）

font-family:"microsoft yahei"

3.font-weight:字体粗细 100~900

font-weight:900

4.font-style:字体样式（倾斜）

font-style:italic

5.text-ident:文字缩进

text-ident:2em

6.text-align:center

7.text-decoration:设置文本样式（下划线）

text-decoration:underline

8.line-height:设置文本的上下位置

line-height:30px

背景样式

1.background-color:设置背景颜色

background-color:#096

2.background-image:设置背景图片

background-image:url(图片路径）

3.background-position:设置背景位置

left左 center中 right右 top上 bottom下

4.background-size:设置背景大小

background-size:cover#缩放

5.background-repeat:设置背景重复

background-repeat:no-repeat#背景不重复

努力的小贵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识css 与文本背景样式

2.id选择器：先给标签设置id名，然后通过#id名的方式找到改标签，id相对于身份证，是唯一的，不要给多个标签设置重复id。一个网页，我不想用a的样式/换个样式，就可以用标签选择器全选，去除。rgb(0,0,0)#黑色。主要是用来做布局使用，本身没有属性，样式，含义,可以做布局使用，把对应内容写在里面。1.内部样式表 -->把样式写在style标签中，style标签写在head里的。图片 --- 宽高，边框，颜色，透明。span标签是一个文本标签，他没有特别的样式/属性，很单纯，适合用来夹文本样式。
复制链接

扫一扫