1.css简述
1.1 css是什么?有什么作用?
HTML -> 页面的结构 -> 人的面部(素颜)
CSS -> 美化页面 -> 给人化妆
CSS(Cascading Style Sheets):层叠样式表
层叠:一层一层叠加
样式表:存储样式的地方,多个样式
CSS通常称为CSS样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIC布局更加灵活,更容易绘制出用户需要的结构
CSS作用:修饰HTML页面,更丰富多彩的 展示超文本信息
1.2 css入门案例
1.4 css的代码规范
放置规范:
在<style>
标签内容体中书写css样式代码。
<style>
标签放置在<head>
标签之中。
格式规范:
选择器名称{属性名1:属性值1;属性名2:属性值2;……}
选择器:即指定CSS样式作用在哪些HTML标签上
代码规范:
- 属性名和属性值之间是键值对关系;
- 属性名和属性值之间用":“连接,最后”;"结尾;
- 如果一个属性名有多个值,多个值之间用空格隔开
- CSS注释内容:
/*注释内容*/
等同于java多行注释
2.css选择器
2.1 基本选择器
2.1.1 元素选择器
HTML标签又名HTML元素
元素选择器:即以HTML标签名作为选择器名称。
作用:选择CSS样式代码作用于对应标签名的标签上。
- 格式:
标签名{
/*CSS样式代码*/
}
适用范围:适用于将相同样式作用在多个同名标签上
2.1.2 类选择器
每个HTML标签都有一个class属性,class属性值即为类名
类选择器:即以HTML的类名(class属性值)作为选择器名称。
作用:选择CSS样式代码作用域对应类名的HTML标签上
- 格式:
.类名{
/*css样式代码*/
}
适用范围:适用于将样式一次作用在相同类名的标签上。(即使标签名不同)
2.1.3 id选择器
每个HTML标签都有一个id属性,id的属性值必须在本页面是唯一的。
id选择器:即以HTML的id(id属性值)作为选择器名称。
作用:选择CSS样式代码作用域某个规定id值得html标签上
- 格式:
#id 值{
/*CSS样式代码*/
}
适用范围:适用于将样式作用某个标签上。(更有针对性)
注意:必须手动保证ID值在本页面唯一。
2.2 基本选择器的组合方式
2.2.1 层级关系
标签和标签之间有层级关系,例如:<html>
标签的子标签为<body>
标签。
我们可以对基本选择器进行组合,表现出层级关系,从而更加针对性地把样式作用域某些标签上。
- 格式:
选择器1 选择器2...{
/*css样式代码*/
}
选择器1下的选择器2。
3.css样式
3.1 边框属性
所有HTML标签都有边框,默认边框不可见
3.1.1 border
设置边框的样式
- 格式:宽度 样式 颜色
例如:border:1px solid red ,1像素粗的实线红色边框。
线条样式:solid实线,none无边,double双线
3.1.2 width
用于设置标签的宽度
3.1.3 height
高度
3.1.4 background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式:
① 英文单词 例如:red
② 颜色代码 格式:#红绿蓝 每一个颜色用两个16进制位数表示
3.2 布局
3.2.1 float
通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动属性
- 格式:
选择器{float:属性值;}
常用属性值:
none:元素不浮动(默认值)
left:元素向左浮动
right:向右浮动
注意:因为元素设置浮动属性后,会脱离原有文档流,从而会影响其他元素的样式,所以设置浮动以后,页面样式需要重新调整。
3.3 转换
3.3.1 dispaly
HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块级元素和行内元素
-
块元素:以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行。
常见的块元素:<h1>
<p>
<div>
<ul>
等 -
行内元素:根据内容多少来占用行内空间,不会自动换行
常见的行内元素:<span>
<a>
等
display属性可以使得元素在行内元素和块元素之间相互转换。
-
格式:
选择器{display:属性值} -
常用的属性值:
block:此元素将显为块元素(块元素默认的dispaly属性值)
inline:此元素将显示为行内元素(行内元素默认的display属性值)
none:此元素将被隐藏,不显示,也不占用页面空间
3.4 字体
3.4.1 font-size
3.4.2 color
4.盒子模型
4.1 什么是盒子模型
所有的HTML元素,我们都可以看成一个四边形,即一个盒子。
用CSS来设置元素盒子的 内边距、边框、外边距 的样式的方式,
相当于设置盒子的样式,所以我们将其称之为 盒子模型
4.2 边框(border回顾及再阐述)
边框:HTML元素盒子的框体
边框有四个属性可以设置:
- border-top:上边框
- border-right:右边框
- border-bottom:下边框
- border-left:左边框
通用性设置:一次性设置上下左右边框样式
border:1px solid red;
4.3 内边距padding
内边距:HTML元素里的内容体到HTML元素边框的距离
内边距同样有四个属性可以设置:
- padding-top:上边距
- padding-right:右边距
- padding-bottom:下边距
- padding-left:左边距
通用性设置:
一次性设置上下左右内边距距离为10px
padding:10px
4.4 外边距margin
外边距:HTML元素边框到其他HTML元素边框的距离
同样四个属性
通用性设置
5.css和HTML的结合方式
5.1 内部样式
5.1.1 行内样式
行内样式,是通过标签的style属性来设置元素的样式。
格式:<html标签 style="css样式代码"/>
适用环境:更加针对性修改某个标签的样式
5.1.2 <style></style>
标签方式
当某些样式在页面中被多个标签重复使用,为了编码更加灵活,避免书写重复代码,我们将样式代码从标签sytle属性中抽取出来,统一写入到style标签中。
适合环境:适合页面中进行样式复用
5.2 外部样式
5.2.1 <link/>
标签方式
<link/>
又称为链入式,是将所有的样式放在一个或多个以.css为拓展名的外部样式表文件中,通过<link>
标签将样式连接到HTML文档中。
格式:
<link rel = "stylesheet" type="text/css" href="css 文件路径"/>
- rel=“stylesheet”,固定值,表示样式表
- type=“text/css”,固定值,表示css类型
- href,表示css文件位置
适合不同页面进行样式复用