CSS
概述
1、CSS:Cascading Style Sheets,层叠样式表
2、标记性语言:增强控制网页样式,并允许将样式信息与网页内容分离
语法规则
<head>
<!--style 标签专用于定义 CSS 样式代码-->
<style type="text/css">
标签1 {
属性1: 值1 值2;
……;
}
标签2 {
属性2: 值1 值2;
……;
}
</style>
</head>
1、选择器:浏览器根据选择器,决定受 CSS 样式影响的 HTML 元素(标签)
2、属性(property):改变的样式名,并且每个属性都有一个值,属性和值被冒号分开,并由 {} 包围,组成了一个完整的样式声明(declaration)
3、多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开,虽然最后一条声明的最后可以不加分号,但尽量在每条声明的末尾都加上分号
4、一般每行只描述一个属性
5、注释:/*注释内容*/
CSS 结合 HTML
1、嵌入样式表:在标签的 style 属性上,设置 key:value……; key:value……;,修改标签样式
(1)代码量庞大
(2)可读性差
(3)无复用性
2、内部样式表:在 head 标签中,使用 style 标签定义所需 CSS 样式
<head>
<!--style 标签专用于定义 CSS 样式代码-->
<style type="text/css">
标签1 {
属性1: 值1 值2;
……;
}
标签2 {
属性2: 值1 值2;
……;
}
</style>
</head>
(1)只能同一页面内复用代码,不能多页面复用 CSS 代码
(2)维护困难
3、外部样式表:把 CSS 样式写成一个单独 CSS 文件,再通过 link 标签引入即可复用
标签1 {
属性1: 值1 值2;
……;
}
标签2 {
属性2: 值1 值2;
……;
}
<head>
<!--link 标签专门用来引入 CSS 样式代码-->
<link rel="stylesheet" type="text/css" href="CSS 文件路径"/>
</head>
CSS 选择器
1、标签名选择器
(1)格式
标签名 {
属性: 值……;
……;
}
(2)决定哪些标签被动使用样式
2、id 选择器
(1)标签可以定义 id 属性,用以区分标签
(2)格式
#id 属性值 {
属性: 值……;
……;
}
3、class 选择器 / 类选择器
(1)class 属性用于分组,可以在多个标签中使用 ,不论是否为同类标签
(2)用于描述一组元素的样式
(3)格式
.class 属性值 {
属性: 值……;
……;
}
4、组合选择器
(1)多个选择器共用同一个 CSS 样式代码
(2)格式
选择器1, 选择器2,……{
属性: 值……;
……;
}
CSS 常用样式
1、字体颜色
(1)属性:color
(2)值:颜色名:red、rgb 值:rgb(255, 0, 0)、十六进制:#00F6DE
2、边框
(1)属性:border
(2)值:像素值、颜色等
3、宽度
(1)属性:width
(2)值:像素值:20px、百分比:20%
4、高度
(1)属性:height
(2)值:像素值:20px、百分比:20%
5、背景颜色
(1)属性:background-color
(2)值:颜色名:red、rgb 值:rgb(255, 0, 0)、十六进制:#00F6DE
6、字体大小
(1)属性:font-size
(2)值:像素值:20px
7、文字居中
(1)属性:text-align
(2)值:center
8、超链接去下划线
(1)属性:text-decoration
(2)值:none
盒子模型
1、Margin(外边距)):清除边框外的区域,没有背景颜色,是完全透明的
2、Border(边框):围绕在内边距和内容外的边框
3、Padding(内边距):清除内容周围的区域,所释放的区域将会受到元素背景颜色的填充
4、Content(内容):盒子的内容,显示文本和图像
position 属性
1、指定了元素的定位类型
2、static 值
(1)HTML 元素的默认值,即没有定位,遵循正常的文档流对象
(2)静态定位的元素不会受到 top、bottom、left、right 影响
3、relative 值
(1)相对定位元素的定位是相对其正常位置
(2)移动相对定位元素,但它原本所占的空间不会改变
4、fixed 值
(1)元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
(2)Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持
(3)Fixed 定位使元素的位置与文档流无关,因此不占据空间
(4)Fixed 定位的元素和其他元素重叠
5、absolute 值
(1)绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
(2)absolute 定位使元素的位置与文档流无关,因此不占据空间
(3)absolute 定位的元素和其他元素重叠
6、sticky 值
(1)粘性定位,基于用户的滚动位置来定位
(2)粘性定位的元素是依赖于用户的滚动,在 position: relative、position: fixed 定位之间切换
(3)行为像 position: relative;当页面滚动超出目标区域时,表现像 position: fixed;它会固定在目标位置
(4)在跨越特定阈值前,元素定位表现为相对定位,之后为固定定位
(5)特定阈值:top、right、bottom、left 之一,即指定 top、right、bottom、left 之一,才可使粘性定位生效,否则其行为与相对定位相同
7、元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法
Float 属性
1、使元素向左或向右移动,其周围的元素也会重新排列
2、一般用于图像
3、元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
(1)一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
(2)浮动元素之后的元素将围绕它
(3)浮动元素之前的元素将不会受到影响
4、清除浮动
(1)元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性
(2)clear 属性指定元素两侧不能出现浮动元素
(3)使用 clear 属性往文本中添加图片廊
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战