资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css基础内容

css基础内容

番茄西红柿 / 2025人阅读

摘要：注意设置并不是将内边距设置为，而是在原来的基础上，增加，若想减小内边距，可以使用设置负值来完成。

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的一张图

通过调整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的末尾加上

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等属性进行调整
​
GPU云服务器 云服务器 css基础 基础css css基础教程 基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1653.html

相关文章

  • 关于CSS Reset 那些事（四）之 构架CSS基础样式库

    摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0

  • 关于CSS Reset 那些事（四）之 构架CSS基础样式库

    摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...

    mingzhong 评论0 收藏0

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...

    DangoSky 评论0 收藏0

  • 前端入门1-基础概念

    摘要：基础基础是一种标记语言，不是编程语言，需要明确这点。元素标签内容基础基础负责文本样式的呈现，既然将和分离开，各自只负责各自的职责，那么肯定需要某种方式将两者连接在一起。 本篇文章已授权微信公众号 dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyh...

    codecraft 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<