CSS基础知识

* css,英文Cascading Style Sheets,中文名:级联样式表。层叠样式表。
* css是一种表现语言,是对网页语言的补充。
* css用于网页的风格设计,包括字体,颜色,位置等。
* css使用的4中方式:引入外部样式文件,导入外部样式文件,使用内部样式定义,使用内联样式定义。
引入外部样式文件:
<link type="text/css" rel="stylesheet" href="css样式文件的url"/>

导入外部样式文件:
<style type="text/css">
@import "css样式文件的url";
</style>

使用内部样式定义:
<style type="text/css">
div {
background-color: #ffffff;
width: 300px;
height: 300px;
}
</style>

使用内联样式定义:
<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>

css的两个特性:层叠,继承

层叠:层叠样式生效的优先级:

内联样式->内部样式->外部样式->浏览器默认效果。

继承,就是css属性可以从父元素向下传递到子元素。

css的选择器

* 元素选择器,是最简单的选择器。
* 通配符选择器,用"*"表示,表示对任意元素都有效。
* 属性选择器
格式:
E[attribute]{property1:value1; property2:value2;...}

语法 说明
E[attribute] 用于选取带有指定属性的元素
E[attribute=value] 用于选取带有指定属性和指定值的元素
E[attribute~=value] 用于选取属性值包含指定值的元素,该值必须是整个单词,可以前后有空格
E[attribute\|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词或者后面跟着连字符“-”
派生选择器

*
派生选择器根据元素在其位置的上下文关系定义样式

*
派生选择器分3种:后代选择器,子元素选择器,相邻兄弟选择器

*
后代选择器是某元素后代的所有元素。

*
子元素选择器是相对于父元素的第一级子元素符合条件。

*
相邻兄弟选择器,针对的元素是同级元素,拥有相同的父元素,且两个元素是相邻的。

*
id选择器,以特定id值的HTML元素指定样式。

*
类选择器,以指定class的HTML元素指定样式。

*
伪类选择器

伪类选择器:伪类选择器和伪元素选择器

伪类以冒号(:)开头,元素选择符和冒号之间不能有空格,伪类名中间也不能有空格。

css中常用的伪类如下表所示:

伪类名 说明
:active 向被激活的元素添加样式
:focus 向拥有输入焦点的元素添加样式
:hover 向鼠标悬停在上方的元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素添加样式,且该元素是它的父元素的第一个子元素
:lang 向带有指定lang属性的元素添加样式
伪元素选择器

css中常用的伪元素如下表所示:

伪元素名 说明
:first-letter 向文本的第一个字母添加样式
:first-line 向文本的第一行添加样式
:after 在元素之后添加内容
:before 在元素之前添加内容
css背景

css背景属性如下:

属性 说明
background-color 定义背景颜色
background-image 定义背景图片
background-repeat 定义背景图片是否重复以及其重复方式
background-attachment 定义背景图片是否跟随内容滚动
background-position 定义背景图片的水平位置和垂直位置
background 可以用一条样式定义各种背景属性
background

* background-color用于设置背景颜色,初始值为transparent透明色。
* 颜色取值3种如:颜色名,十六进制颜色,rgb函数。
* background-image用于设置元素的背景图片,默认值为none。
* background-repeat控制图像的平铺。
background-repeat默认值为repeat,即图像沿着x轴和y轴平铺,还可以指定沿着x轴平铺rpeat-x,沿着y轴平铺repeat-y
,或者不平铺no-repeat,继承父元素该属性设置inherit。

* background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为:scroll
,表示可以随着页面其余部分的滚动而滚动。设置fixed,表示当页面其余部分滚动时,背景图片不会滚动,设置inherit,继承父元素。
* background-position用于设置背景图像圆点的位置。
background可以将background-color,background-position,background-attachment,
background-repeat,background-image全部设置。

css字体属性

css常用字体属性表:

属性 说明
font-family 定义文本的字体系列
font-size 定义文本的字体尺寸
font-variant 定义是否以小型大写字母的字体显示文本
font-style 定义文本的字体是否是斜体
font-weight 定义字体的粗细
font 可以一条样式定义各种字体属性
* font-family用于设置元素的字体,该元素属性值一般可以设置多个字体。
* font-size用于设置字体的尺寸。
* font-style用于设置字体是否是斜体,默认值为normal,当设置为italic,显示为一个斜体的样式,当设置为oblique
,显示为一个倾斜的样式。
* font-variant用于设置字体使用小写字体,默认为normal,一旦设置为small-caps,将所有小写字母变为大写。
* font-weight用于设置字体的粗细,normal值等于400,bold的值等于700。
* font,可以设置font-family,font-size,font-style,font-variant,font-weight。
css文本属性表:

属性 说明
color 文本颜色
direction 文本方向或者书写方向
letter-spacing 字符的间距
line-height 文本的行高
text-align 文本的水平对齐方式属性,设置元素中文本的水平方式,值有left,right,center,inherit。
text-decoration 给文本添加修饰效果,值有
underline为添加下画线,overline添加上画线,line-through添加删除线,blink添加闪烁的效果,none无如何修饰,inherit。
text-indent 定义文本的首行缩进方式,默认值为0
text-shadow 为文本添加阴影效果
text-transform 切换文本的大小写
white-space 设置如何处理元素内的空白
word-spacing 定义单词之间的距离
css尺寸属性表:

属性 说明
width 设置元素的宽度
min-width 设置元素的最小宽度
max-width 设置元素的最大宽度
height 设置元素的高度
min-height 设置元素的最小高度
max-height 设置元素的最大高度
css列表属性表:

属性 说明
list-style-image 设置列表项标记样式为图像,none/inherit/url
list-style-position 设置列表项标记的位置,inside/outside/inherit
list-style-type 设置列表项标记的类型
list-style 可以用一条样式定义各种列表属性
list-style-type

值 说明
disc 实心圆
circle 空心圆
square 方块
decimal 数字
low-roman 小写罗马数字
upper-roman 大写罗马数字
low-alpha 小写字母
upper-alpha 大写字母
none 无标记
inherit 继承父元素的该设置
css表格属性表:

属性 说明
border-collapse 设置是否合并表格边框
border-spacing 设置相邻单元格边框之间的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中空单元格上的边框和背景
table-layout 设置用于表格单元格列宽的设置方式
盒模型

* css盒模型,包含元素内容content,内边距padding,边框border,外部距margin。
css内边距属性,元素的内边距在边框和内容之间。

css内边距的属性:

属性 说明
padding-top 元素的上内边距
padding-right 元素的右内边距
padding-bottom 元素的下内边距
padding-left 元素的左内边距
padding 用一个声明定义所有内边距属性
设置顺序为上右下左依次进行。
padding: 10px 10px 10px 10px;

css外边距的属性:

属性 说明
margin-top 定义元素的上外边距
margin-right 定义元素的右外边距
margin-bottom 定义元素的下外边距
margin-left 定义元素的左外边距
margin 用一个声明定义所有外边距属性
css边框的属性:

属性 说明
border-top-style 上边框的样式属性
border-right-style 右边框的样式属性
border-bottom-style 下边框的样式属性
border-left-style 左边框的样式属性
border-style 设置4条边框的样式属性
border-top-width 设置上边框的宽度属性
border-right-width 设置右边框的宽度属性
border-bottom-width 设置下边框的宽度属性
border-left-width 设置下边框的宽度属性
border-width 设置4条边框的宽度属性
border-top-color 设置上边框的颜色属性
border-right-color 设置右边框的颜色属性
border-bottom-color 设置下边框的颜色属性
border-left-color 设置左边框的颜色属性
border-color 设置4条边框的颜色属性
border-top 用一条声明定义所有上边框的属性
border-right 用一条声明定义所有右边框的属性
border-bottom 用一条声明定义所有下边框的属性
border-left 用一条声明定义所有左边框的属性
border 用一条声明定义所有边框的属性
border-width 一次定义4条边框的宽度
border-color 一次定义4条边框的颜色
边框的样式

* none,无边框效果
* hidden,与none相同
* dotted,点线边框效果
* dashed,虚线边框效果
* double,双线边框效果
* solid,实线边框效果
* groove,3D凹槽边框效果
* ridge,3D凸槽边框效果
css轮廓是绘制在元素周围的一条线,位于边框边缘的外围,起到突出元素的作用。

属性 说明
outline-style 定义轮廓的样式属性
outline-color 定义轮廓的颜色属性
outline-width 定义轮廓的宽度属性
outline 同一个声明中定义所有的轮廓属性
布局属性

* 布局属性是文档中元素排列显示的规则
* 布局方式3种:普通文档流,浮动,定位
css浮动涉及到的属性

属性 说明
float 设置框是否需要浮动以及浮动方向
clear 设置元素的哪一侧不允许出现其他浮动元素
clip 裁剪绝对定位元素,该元素必须是绝对定位,上右下左原则
overflow 设置内容溢出元素框时的处理方式,值:visible,auto,hidden,scroll
display 设置元素如何显示,值none,block,inline,inline-block,inherit
visibility 定义元素是否可见,visibility设置为隐藏,元素占用的空间依然会保留,但display:none不保留占用空间,值:
visible,hidden
css定位的属性

属性 说明
position 元素的定位类型,值static,absolute绝对,relative相对
top 元素上外边距
right 元素右外边距
bottom 元素下外边距
left 元素的左外边距
z-index 元素的堆叠顺序
z-index用于设置目标对象的定位层序,数值越大,所在层级越高。该属性只在position:absolute时有效。

技术
©2019-2020 Toolsou All rights reserved,
一个名叫“讨火车”的小村子 终于把火车讨来了c++内存 指针越界检测机制_CrtMemBlockHeade错误总结-myBatis plus 分页记一次EventBus内存泄露导致的项目问题服务器价格有什么差异?Android中获取当前正在显示的Activity实例创建数据mysql库流程在Vue中使用Web Worker最优化方法总结:公式解、数值优化、求解思想使用easyPOI导入Excel数据