CSS样式知识点大纲总结、扫盲目录、常见CSS样式整理

最新推荐文章于 2022-09-12 16:12:28 发布

番茄西瓜汤

最新推荐文章于 2022-09-12 16:12:28 发布

阅读量1.3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_42329277/article/details/81018781

版权

前端HTML CSS JS JQ bootstrap 攻略专栏收录该内容

6 篇文章 1 订阅

订阅专栏

CSS样式

背景

@[平铺模式, 背景定位, 百分比及长度定位, 背景固定]

属性模式	语法
背景色	`·background-color：颜色`
背景图片	`background-image: url(地址)`
背景固定	`background-attachment：模式`
起始位置	`background-position：位置`
平铺设置	`background-repeat：平铺模式`

背景平铺
background-repeat: 模式

平铺模式	效果
repeat-x	x轴平铺
repeat-y	y轴平铺
no-repeat	不平铺
repeat	默认全平铺

背景定位
background-position: 位置关键字

位置关键词	作用	组合用法
center	居中	center center
top	顶部	top center 或 center top
bottom	底部	bottom center 或 center bottom
right	靠右	right center 或 center right
left	靠左	left center 或 center left

百分数值 与长度方法定位

例子	效果
`background-position:66% 33%;`	放在水平方向 2/3、方向 1/3 处
`background-position:50px 100px;`	左上角在元素内边区左上角50px、向下100px的位置上

背景固定

例子	效果
`background-attachment:fixed;`	fixed [固定]下拉不会导致背景图移动
`background-attachment:scroll;`	scroll 默认值[不固定]

文本

@[颜色, 大小, 对齐, 装饰，缩进，间距]

属性模式	语法
对齐元素中文本	`text-align`
缩进元素中文本首行	`text-indent`
设置字间距	`backgword-spacing`
设置元素中空白的处理方式	`white-space`
设置行高	`line-height`
字符转换	`text-transform 属性` 处理文字大小写
文本装饰	`text-decoration 属性` 加下划线等等
….	…

水平锤子对齐

文字居中方法一般设置文的行高和父级元素高度一致
vertical-align:enter; 也是可以的

.a {
width:500px;
height:80px;
text-align:center;
line-height:80px;
}

<div class="a">文字文字文字文字</div>

缩进
- 可以为所有块级元素应用

text-indent: 长度单位;

平铺模式	效果
直接值	单位em，可以为负数例：2em 缩进两个字
百分比值	缩进值为 20%，元素第一行会缩进其父元素宽度20%

水平对齐
text-align:对齐属性

属性模式	语法
左对齐	(默认值) `left`
右对齐	`right`
居中	`enter`
两端对齐文	`justify` (不常用)

字间隔 & 字母间隔

属性模式	语法	单位
字间隔【每个单词间隔】	`word-spacing：属性`	em 或 px
字母间隔【每个字间隔】	`letter-spacing：属性`	em 或 px

字体

属性模式	语法	参数
设置字体系列	font-family：字体
字体的尺寸	font-size: 大小
字体风格	font-style：模式	`斜体：italic`
字体的粗细	font-weight：模式	`粗体：bold` `更粗：bolder` `数字：100...`

连接

能设置链接样式的 CSS 属性有很多（如 color, font-family, background 等）
链接的特殊性在于能够根据它们所处的状态来设置它们的样式

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

注意：为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！
a:active 必须位于 a:hover 之后！！

列表

属性模式	语法	参数
列表标记样式	list-style-type：样式	`空：none` `实心(默认)：disc` `数字：decimal` …
标记位置设置	list-style-position:属性	`左侧(默认值) outside` `在文本内inside`
字体风格	list-style-image:url（地址）

表格

属性模式	语法	常用
表格边框合并为单一的边框	border-collapse	`border-collapse: collapse;` 单边框显示
设置分隔单元格边框的距离	border-spacing
设置表格标题的位置	caption-side
………	…….

表格应用案例

    <head>
        <style type="text/css">
            #customers{
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
            }
            td,th{
                font-size: 1em;
                border: 1px solid #98bf21;
                padding: 3px 7px 2px 7px;
            }
            #customers th{
                font-size: 1.1em;
                text-align: left;
                padding-top: 5px;
                padding-bottom: 4px;
                background-color:#A7C942;
                color:#ffffff;
            }
            #customers tr.alt td{
                color:#000000;
                background-color:#EAF2D3;
            }
        </style>

    </head>
    <body>
        /*此处省略创建表单内容*/
    </body>

效果图

模型器

清除所有元素的脏边距

* {
  margin: 0;
  padding: 0;
}

内边距

padding

设置方法	语法	细节
各边统一设置	padding: 10px;
每边顺时针设置	padding: 10px 0.25em 2ex 20%;	单位：px em ex 百分比
单边设置	padding-方向	`上：top` `下：bottom` `左：left` `右：right`

边框

border
每个边框有 3 个方面：宽度、样式，以及颜色

设置方法	语法	细节
边框样式	border-style:样式	`单边框：ridge` `输入框：inset` `凸框：outset`..如下图
边框宽度	border-width: 5px;	可以四个方向分开设置例：`下：border-bottom-width：`
边框颜色	border-color 颜色	可以对四个方向设置顺时针

设置边框常用方法

p {border: 边框粗度 样式属性 颜色;}

边框样式属性

p {border-style: solid solid solid none;} 四个方向都可以分开设置顺时针
边框样式

外边距

margin

四个方向赋值原理

h1 {margin: 0.25em 1em 0.5em;}  /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}     /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}            /* 等价于 1px 1px 1px 1px */
p {margin: auto;}           /* 等价于 全部方向自动对齐居中 */

外边距合并

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

这里写图片描述

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

这里写图片描述

定位

div、h1 或 p 元素被称为块元素。这些元素显示为一块内容。相反，span 和 strong 等元素“行内元素”，这是因为它们的内容显示在行中。

position:位置定义

语法	含义
relative（相对定位）	可以随窗口大小变化，跟随父亲移动
absolute（绝对定位）	不随窗口大小变，只固定在特定坐标轴上
fixed（固定定位）	常用在顶部导航！跟随滚动条移动
static（静态定位）	默认值正常流

overflow:超出边框部分处理

语法	含义
overflow: scroll	超出部分以滚动条显示 `常用`
overflow: hidden	直接裁剪，多余部分不显示 `常用`
overflow: auto	自动判断处理
overflow: visible	`默认值` 不会被修剪，会呈现在元素框之外

clip:裁剪元素

img
  {
  /*裁剪坐标;*/
  clip:rect(0px,60px,200px,0px); 
  }

vertical-align:垂直对齐方式

语法	含义
vertical-align:middle	垂直居中父元素 `常用`
vertical-align:top	元素的顶端与行中最高元素的顶端对齐
vertical-align:bottom	元素的顶端与行中最低的元素的顶端对齐
vertical-align:baseline	`默认值`
…	….

z-index:图层顺序

img{
    z-index:-1; /* 层级为-1 显示在比-1大得层级之下*/
    }

display:框类型

语法	含义
元素不显示	`display：none`
设置为块级，前后带换行符	`display：block`
(默认) 内联元素	`display：inline`
…	…

clear : 清除浮动

语法	含义
clear:left	在左侧不允许浮动元素
clear:right	在右侧不允许浮动元素
clear:both	在左右两侧均不允许浮动元素
clear:none	`默认值`

选择器

选择器分类

类型	语法例子
元素选择器	`p {CSS语法}`
选择器分组	`h2, p {CSS语法}` 多个属性用逗号间隔
类选择器	`.class名 {CSS语法}`
ID选择器	`#ID名 {CSS语法}`
属性选择器	`a[href] {CSS语法}` 只对有href属性的a元素应用样式
后代选择器	`h1 em {CSS语法}`只对h1元素中的em元素应用样式
子元素选择器	`h1 > strong {CSS语法}` h1元素子元素的strong元素应用样式
相邻兄弟选择器	`h1 + p {CSS语法}` 选择紧接另一元素后的元素，且有相同父元素

伪类

@[:hover, ….]

类型	语法例子
被激活的元素	`:active`
鼠标悬浮的元素	`:hover`
键盘输入焦点	`:focus`
未被访问的链接	`:link`
已被访问的链接	`:visited`
第一个子元素	`:first-child`
带有指定 lang 属性	`:lang`

伪元素

@[:before, :first-line, 元素滞后添加元素, ….]

类型	语法例子
向文本的第一个字母添加特殊样式	`h1:first-letter`
向文本的首行添加特殊样式	`h1:first-line`
元素之前添加内容	`h1:before` 常用
元素之后添加内容	`h1:after` 常用

【content】属性用于插入生成的内容，常和:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面

h1:before {content:url(/i/logo.jpg)}

/*各种用法*/
content: normal | string | attr() | uri() | counter()

用法	作用
string	`查入文本的内容，一般是一个字符串`
attr()	`插入元素的属性值，语法：attr(attribute)`
uri()	`插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源` 常用
counter()	计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号

番茄西瓜汤

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS样式知识点大纲总结、扫盲目录、常见CSS样式整理

CSS样式背景文本字体连接列表表格模型器内边距边框外边距外边距合并定位position:位置定义overflow:超出边框部分处理clip:裁剪元素vertical-align:垂直对齐方式z-index:图层顺序display:框类型clear : 清除浮动选择器选择器分类伪类伪元素CSS样式背景...
复制链接

扫一扫

专栏目录