一、CSS概述
CSS:层叠样式表;
二、代码规范
- 放置规范:
在<style>
标签内容体中书写CSS样式代码,<style>
标签放置在<head>
标签之中; - 格式规范:
选择器名称 { 属性名:属性值;属性名:属性值; ...... }
<html>
<head>
<title>标题</title>
<style>
span{
font-size:100px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111111111111</span>
<span>222222222222</span>
</body>
</html>
- 代码规范:
选择器名称 { 属性名:属性值;属性名:属性值; … }
一个属性名有多个属性值,多个值之间用“空格”隔开;
注释:/* 注释内容 */
三、元素选择器
- 元素选择器:以HTML标签名作为选择器名称;
- 适用范围:将相同样式 作用在多个同名标签;
标签名 {
/* CSS样式代码 */
}
四、类选择器
- 类选择器:类名作为选择器名称;
- 适用范围:将样式 一次作用在相同类名的标签上;
.类名 {
/* CSS样式代码 */
}
五、ID选择器
- id选择器:id值作为选择器名称;
- id值,在本页面是唯一的;
- 适用范围:将样式 作用在某个标签上;
#id值 {
/* CSS样式代码 */
}
六、组合方式
- 层级关系
选择器1 选择器2 ......{
/* CSS样式代码 */
}
注意:它表示 选择器1 下的 选择器2;
七、边框属性
注意:所有的HTML标签都有边框,默认边框不可见;
- border:设置边框样式,格式:宽度 样式 颜色;
- width:设置标签宽度;
- height:设置标签高度;
- background-color:设置标签背景颜色;
八、布局
- float:
选择器 {float:属性值;}
常用属性值: none:元素不浮动
left:元素向左浮动
right:元素向右浮动
- 注意:元素设置浮动属性后,会脱离原有文档流(脱离原有的板式),从而会影响其他元素的样式,所以设置浮动以后,页面样式需要重新调整。
九、转换
- display
可以使元素 在行内元素和块元素之间相互转换; - 注:
块元素:<h1>
,<p>
,<div>
,<ul>
等;(会自动换行)
行内元素:<span>
,<a>
等;(不会自动换行)
选择器{display:属性值}
常见属性值: block:块元素;
inline:行内元素;
none:隐藏,不显示,也不占用页面空间;
十、字体
- font-size:字体大小;
- color:颜色;
十一、盒子模型
1. 什么是盒子模型
- 所有的 HTML 元素都可以看成一个四边形,即一个盒子;
- 用 CSS 来设置元素盒子的 内边距、边框、外边距 的样式的方式;
- 相当于设置盒子的样式,我们称之为 盒子模型;
2. 边框(border)
注:可直接用 通用性设置,例如:border:1px solid red;
(后面内边距、外边距 同理)
3. 内边距
4. 外边距
十二、CSS和HTML的结合方式
1. 内部样式
(1)行内样式
- 通过标签的 style 属性来设置元素的样式;
- 适用环境:更加针对性的修改某个标签的样式;
<html 标签 style="CSS样式代码"/>
(2)<style></style>
样式
- 适用环境:适合在页面中进行样式复用;
2. 外部样式
(1)<link/>
标签方式
<link/>
又称为 链入式,试将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中,通过<link/>
标签将样式连接到 HTML 文档中;- 适用范围:适合不同页面进行样式的复用;
<link rel="stylesheet" type="text/css" herf="css文件路径"/>
- rel="stylesheet": 固定值,表示 样式表;
- type="text/css": 固定值,表示 css 类型;
- herf="css文件路径": 表示 css 文件位置;
css文件如下:
HTML 文件如下: