CSS总结

最新推荐文章于 2024-07-12 20:49:16 发布

喜乐ll

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量178

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_63341952/article/details/121178010

版权

css有两个部分组成：选择器+一条或多条声明。每条声明由一个属性和一个值组成，属性和值之间要被冒号隔开。

背景

background-color      指定填充背景颜色
background-image      引用图片作为背景
background-repeat     决定是否重复背景图片
background-attachment 决定背景图是否随页面滚动
background-position   指定元素背景图片的位置

background-color 颜色值分为三种：

十六进制-eg：“#ff0000”
RGB-eg：“rgb（255,0,0）”
颜色名称-eg：“red”

background-repeat :

background-repeat:repeat-x
在这里插入图片描述
background-repeat:repeat-y

background-repeat:no-repeat

background-position ：

 background-position：left top    图片位置在左上角
 background-position：right top   图片位置在右上角
 background-position：center      图片位置居中
 ...

文本格式

对齐方式

text-align：center   居中
text-align：right    右对齐
text-align：justify   两端对齐

文本装饰

text-decoration：overline
text-decoration：line-throught
text-decoration：underline

在这里插入图片描述

文本转换

text-transform：uppercase   大写
text-transform：lowercase   小写
text-transform：capitalize  首字母大写

文本缩进

text-indent：50px

word-spacing 设置字间距

字体

font-family 与font-style的区别：
font-family 字体系列（微软雅黑，宋体等）
font-style 字体样式（normal，斜体等）

font-style

<!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>Document</title>
    <style>
       p.normal {font-style: normal;}
       p.italic {font-style: italic;}
       p.oblique {font-style: oblique;}
    </style>
</head>
<body>
    <p class="normal">这是一个段落，正常</p>
    <p class="italic">这是一个段落，斜体</p>
    <p class="oblique">这是一个段落，斜体</p>
</body>
</html>

运行结果
在这里插入图片描述

font-size字体大小

font-size:40px        1em=16px

font-weight 字体粗细

font-weight：normal
font-weight：ligher
font-weight：bold
font-weight：900

链接

hover必须跟在link和visited后面
active必须跟在hover后面

盒子模型

在这里插入图片描述
Margin(外边距）-外边距是透明的
Border（边框）-围绕在内边距和内容外的边框
padding(内边距)-清楚内容周围的区域，内边距是透明的
content(内容）-盒子的内容，显示文本和图像

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

border-style的属性可以有1-4个值：在这里插入图片描述

class与ID的区别

class就跟人的名字一样可以被多的人使用
id好比人的身份证只能别被一个人用

通配符

用*会使页面中的所有标签HTML，div ，span，body等标签全部属性改变

喜乐ll

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

css有两个部分组成：选择器+一条或多条声明。每条声明由一个属性和一个值组成，属性和值之间要被冒号隔开。背景background-color 指定填充背景颜色background-image 引用图片作为背景background-repeat 决定是否重复背景图片background-attachment 决定背景图是否随页面滚动background-position 指定元素背景图片的位置background-color 颜色值分为三种：十六进制-eg
复制链接

扫一扫