css基础内容

时间：2022-06-15 17:00:10

css基础内容

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

一.css的引入方式

1.直接在html标签元素内嵌入css样式
<div style="font-size:14px; color:#FF0000;">行内引入</div>
2.在html头部head部分内style声明插入代码
<style>

        p{

            background-color: #FF0000;

        }

    </style>
3.使用@import引用外部CSS文件
<style type="text/css">

          @import"css文件路径";

</style>

这种方式会先加载html文档，再引入css渲染，可能会出现先打开没有样式的显示之后才有了样式渲染。

4.使用link来调用外部的css文件
<link href="css文件路径" rel="stylesheet" type="text/css"/>

二.css选择器

1.基础选择器
基本选择器 说明
* 匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.class名 class选择器，匹配所有class属性为此class名的元素
#id名 id选择器，匹配所有id属性等于此id名的元素
2.组合选择器
组合选择器 说明
E,F 同时匹配所有E元素或F元素
E F 后代选择器，匹配所有E标签下的F元素
E>F 子选择器，匹配所有E下一级的F元素
E+F 相邻兄弟选择器，匹配所有紧随E元素之后的同级元素F
E~F 匹配E元素后面的所有兄弟元素中的第一个F元素
3.属性选择器
属性选择器 说明
E[att] 选中具有attr属性的E元素
E[attr=val] 选中具有attr属性，并且属性值为val的E元素
E[attr^=val] 选中具有attr属性，并且属性值以val开始的E元素
E[attr$=val] 选中具有attr属性，并且属性值以val结束的E元素
E[attr*=val] 选中具有attr属性，并且属性值包含val的E元素
E[attr~=val] 选中具有attr属性，并且属性值包含val的E元素，该属性值必须以空格隔开
4.伪类
锚伪类 说明
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接

a:hover 必须被置于 a:link 和 a:visited
a:active 必须被置于 a:hover 之后

E:before 在元素之前插入内容
E:after 在元素之后插入内容
举例：

p:before{content:"sfencs";color:red}//在p标签之前插入sfencs

p:after{ content:"sfencs"；color:red}//在p标签之后插入sfencs

三.css属性

1.字体
//设置字体大小

font-size: 20px

font-size: 50%

font-size: larger

//设置字体颜色

color:blue

color:#FF0000

color:rgb(255,0,0)

color:rgba(255,0,0,0.5)//最后一项是透明度

//设置字体样式

font-family:Microsoft YaHei

//设置字体粗细

font-weight: lighter//bolder/lighter

font-weight: 500//100-900

font-weight: bold//normal/bold

//字体倾斜

font-style: oblique
2.背景
background-color:blue//背景颜色

background-image: url('图片路径')

background-repeat: no-repeat//图像平铺模式：repeat垂直方向和水平方向重复/repeat-x水平方向重复/repeat-y垂直方向重复/no-repeat不重复
3.文本
text-align: center//文本对齐方式：left/center/right

line-height: 200px//行高

vertical-align:middle//设置元素的垂直对齐方式：top把元素的顶端与行中最高元素的顶端对齐/bottom把元素的顶端与行中最低的元素的顶端对齐........

text-indent: 150px//首行缩进

letter-spacing: 10px//字符间隙

word-spacing: 20px//单词间隙

text-transform:uppercase//控制文本大小写：capitalize单词大写字母开头/uppercase全部大写/lowercase全部小写
4.边框
border-style: solid边框样式

border-color: black边框颜色

border-width: 20px边框宽度
5.列表
list-style-type:circle//设置列表项标记的类型

list-style-position:inside//设置在何处放置列表项标记

list-style-image: url('图像路径')//使用图像来替换列表项的标记
6.display
display:none//不显示

display:block//显示为块级元素

display:inline//显示为内联元素，元素前后没有换行符

display:inline-block//行内块级元素
7.外边距和内边距

这里借用w3school的一张图
css基础内容
通过调整margin，padding来调整元素内容之间的举例，元素与元素之间的举例。
注意1：设置padding-left:10px;并不是将内边距设置为10px，而是在原来的基础上，增加10px，若想减小内边距，可以使用设置负值来完成。
注意2：body标签在html标签之中，所以body与html之间会有外边距，这就是浏览器网页两边会有白边的原因，可以通过改变body的margin来解决。
注意3：边界塌陷问题，父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin
　　　 解决方法：1.给父div设置透明边框2.给父div设置padding3.给父div设置over-flow:hidden

8.float浮动

float使得元素脱离文档流，使得元素向左或向右浮动，直到遇到边框

float:right//是元素向右浮动

float:left//使元素向左浮动

如果两个挨着的元素同时向右浮动，那么左边的元素也会紧随着右边的元素，而不会到达边框
如果一行内放不下多个浮动元素，那么多余的浮动元素会到达下一行。
如果不想一个元素的两边有浮动元素，可以使用clear属性，

clear:none

clear:left

clear:right

clear:both

浮动虽然有益处，但也会带来副作用，即由于浮动脱离了文档流，导致父级div不能够被撑开，导致浮动溢出
解决方法：1.设置父级div高度2.在父级div的末尾加上

<div class="clear"></div>

3.给父级div加上

:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

font-size:0;

}
9.position
positipn:static//默认值。没有定位，元素出现在正常的流中

position:relative//生成相对定位的元素，相对于其正常位置进行定位，可以使用top，right，bottom，left等属性进行调整

position:fixed//生成绝对定位的元素，相对于浏览器窗口进行定位

position:absolute//生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位,可以使用top，right，bottom，left等属性进行调整
​

相关文章