CSS基础知识

最新推荐文章于 2024-06-21 15:44:03 发布

小高睡不醒.

最新推荐文章于 2024-06-21 15:44:03 发布

阅读量153

点赞数 1

分类专栏： css 文章标签： vscode

本文链接：https://blog.csdn.net/qq_62563728/article/details/123586754

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 继承：

如果想给body、div、span等改变字体和颜色

代码如下：

div {
   color: red;
   font-size: 12px; 
}

2. 类选择器：

.val {
   color: purple;
   font-size: 12px;
}

<body>
<div class="val">小高是美女</div>
</body>

3. id选择器

例如：

<style>
#nav {
   color: purple;
   font-size: 12px;
}
</style>

<body>
<div id="nav">小高是美女</div>
<body>

4. 通配符选择器：把内容全部改成一样的

例如：

* {
  color: purple;
  font-size: 12px;
}

5.设置字体粗细

font-weight：normal (细)

font-weight: fold （粗）

一般设置时通常用：

font-weight：400 （细）

font-weight: 700 （粗）

6.文字样式：

font-style: normal （默认值，标准的字体样式）

7.对齐样式

例如：(居中对齐)

<div text align="center"></div>

8.装饰文本

不要下划线： text-decoration : none;

上划线：text-decoration : overline;

下划线：text-decoration : underline;

删除线：text-decoration : line-through;

9.文本缩进：text-indent : 2em;

几个em就相当于开头会空几格

10.行间距：line-height；

11.块元素和行内元素转换（重点）：

转化为块元素：display：block；

转化为行内元素：display：line；

转化为行内块元素：display：line-block；

12. 背景图片等

背景图片地址：background-img：url()

无背景图： background-img

background- repeat：repeat （图片横向上纵向平铺）

background-repeat：no-repeat (图片不平铺)

background-repeat：repeat-x （图片横向平铺）

background-repeat：repeat-y （图片纵向平铺）

background-attachment : scroll （背景图像是随对象内容滚动）

background-attachment : fixed （背景图像固定）

background : rgba(0 , 0 , 0 , 0.3) （背景半透明）

小高睡不醒.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识

1. 继承：如果想给body、div、span等改变字体和颜色代码如下：div { color: red; font-size: 12px; }2. 类选择器：.val { color: purple; font-size: 12px;}<body><div class="val">小高是美女</div></body>3. id选择器例如：<style>#nav {
复制链接

扫一扫