Day02 - CSS
HTML的布局方式大致分为两种:
1) 表格标签 - table
2) div + css
块级标签
典型的就是<div>< /div>
,块级标签独占一行,同理,<h>
标签,<li>
标签也是块级标签;div标签独自不能够实现复杂的效果,必须结合css样式进行渲染。如果把div标签用id或者class来标记<div>
,那么该标签的作用会显得更加有效。
<div>< /div>
标签属性:
align:表示div中内容的对齐方式
行级标签
<span>< /span>
,不独占一行;
<body>
<div>
这是一个块
</div>
<div>
这是一个块
</div>
<span>
这是一个行级
</span>
<span>
这是一个行级
</span>
</body>
* css:层叠样式表、
CSS:Cascading Style Sheets
定义:
CSS通常称为CSS样式或者层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片外形(宽高和边距等)、以及版面布局等其它样式。
名词解释 :
* 样式表:给HTML标签添加需要显示的效果
* 层叠:使用不同的添加方式,给同一个HTML标签添加样式,最后所有样式都叠加在一起,共同作用于该标签。
作用:
1)设置html样式
2)复用已经写过的样式代码,当两个css修饰同一个标签的时候,发生冲突的属性,以最后一个修饰该标签的css为准,后加载为准;
css的三种引用方式:
行内样式
内部样式
外部样式
**行内样式:
css内嵌在html的标签里面
书写规范: style=”属性名 : 属性值 ; 属性名 : 属性值;”
<div style="font-size: 12px; color: deepskyblue ;">
这是一个块
</div>
<span style="color: red; font-family: 'arial black'; font-size: 20px;">
这是一个行级
</span>
style其实是html中标签div的属性,而双引号中的color,font-size才是css里面的属性。
在双引号中,用分号;分隔不同的属性。
字体大小font-size的px不能够省略,css中,像素单位是不能够省略的,只有在html中的单位才能够省略。
优点:
优先级最高
可读性强
缺点:
毫无复用性;
**内部样式 也叫内嵌样式
在该html文件的head标签里添加style标签来改变样式。只对其当前所在的html页面有效,可以对多处设置图同一样式;
style当中注释要写成/**/
书写规范:
<style>
选择器 {
属性名:属性值;
color: red;
font-size: 40px;
}
</style>
内部样式写在哪里都可以,但是建议写在<head></head>
标签中,写在<title>
下方
语法:
<style>
选择器{
}
</sytle>
<style type="text/css">
div{
color:green;
font-size:200px;
}
</style>
优点:
有一定的复用性,复用性较高,在该html文件内可以复用;
缺点:
可读性不强,书写不方便;
外部样式:也叫链入式
在外部定义一个css文件,以.css结尾。 然后再需要用到该样式的html中引入css
同一个css样式表可以被不同的html页面链接使用,同时,一个html页面也可以通过多个<link />
标记链接多个css样式表使用。
步骤1)新建css文件,在css文件中:
选择器{
属性名 : 属性值;
color: red;
font-size: 40px;
}
步骤2)使用link标签将css文件引入进来
<link rel="stylesheet" href="../css/demo1.css" type="test/css" />
rel表示关系,stylesheet表示样式表,**不能够缺少**,缺少则设置不成功
href表示连接的css样式文件
type=“test/css” 固定值,表示css类型
rel=“stylesheet” 固定值,表示样式表;
优缺点
* 优点:可读性较好,可复用性非常强
* 缺点:效率略低。客户端在访问html页面的时候,要从服务器请求对应的css文件。 用户加载的时候速度稍慢
<link>
标签
link标签的属性:
* href : 引入的css文件的路径
* rel : relation的缩写,表示引入的文件和该HTML的关系。 必须要写
* type : 引入的文件类型
css三种引用方式的优先级:
行内样式 > 内部样式和外部样式
内部样式和外部样式的优先级谁后加载,谁的优先级就高。
CSS的选择器
“选择器”用于指定css样式的html对象(如果html的标签名字,这里是直接使用标签名字而不需要加上任何的尖括号,例如直接使用div),花括号内是对对象设置具体的格式,属性和属性值以键值对的方式进行出现的,使用英文冒号:分隔,多个属性之间使用英文分号进行分隔;
注意几点:
1)CSS样式选择器严格区分大小写,但是属性和属性值不区分大小写;
2)多个属性之间必须用英文状态下的分号进行分隔,但是最后一个属性后面的分号可以省略;为了增加新样式,最好将最后一个属性后面的分号也保留。
3)如果属性的值由多个单词组成且中间包含空格,就必须为这个属性值加上英文状态下的引号。
p{ font-family : “Times New Roman”}
关于css中的空格:
1)在css代码中,空格是不被解析的,花括号以及分号前后的空格可有可无,因此可以使用空格键,Tab键,回车键对样式代码进行排版,即所谓的格式化css代码,这样可以提高代码的可读性。
2)需要注意的是,在属性的值和单位之间是不允许出现空格的,否则浏览器解析的时候会出现错误。例如下方所示就是不正确的。
CSS的基本选择器 - 三种
1)元素选择器/标签选择器
标签例如div
* 语法:
标签名{
属性名:属性值;
}
最大的优点就是能够快速地为页面中同类型的标记统一样式;
但是这也是他的缺点,不能够设计差异化的样式。
2)ID选择器
id,给独特的某个标签设置样式,一般不用这种方式,因为id原则上是唯一的。不是给css使用的,而是给js使用的。id在命名的时候不能够以数字开头,否则会无效
元素的id值是唯一的,这种方法只能够对应文档中某一个具体的元素;
使用#号进行引用。
* 语法:
#id{
属性名:属性值;
}
3)类选择器
给具有相同类名class的一类标签设置样式,用的最多
* 语法:
.类名{
属性名:属性值;
}
例:
<style>
.test{
color: royalblue;
}
</style>
<div class="test">
这是一个块
</div>
CSS的其他选择器
1)层级选择器
* 语法:
父选择器 子选择器 孙子选择器{
属性名:属性值;
}
.div2 div .sp1{
}
- 应用场景:一层层往下找到某一个或者一类标签。
2)属性选择器
用于设置同一个属性值type的一组标签
注意:标签后面跟中括号 [ ],type后面的值跟单引号 ‘ ’;
* 语法:
标签选择器[属性名='属性值']{
css的样式
}
input[ type = 'text']{
background-color:green;
}
3)伪元素选择器
<a href="">< /a>
标签的状态选择器
a标签设置点击前颜色,点击后的颜色,a标签的四种状态,link默认状态,hover鼠标移上去,active点击状态,visited点击过后的状态
* link 对象在未被访问前的样式。
* hover 用于当用户把鼠标移动到元素上面时的效果;
* active 用于用户点击元素那一下的效果
* visited 用于用户点击过后的效果
注意: 标签名 a 后面跟 冒号:
* 语法:
a:link{
css样式
}
a : link {
color:bule ;
}
a : hover{
color:green;
}
a : active{
color:red;
}
a: visited{
color: yellow;
}
CSS的属性
1)文字和文本属性
* color:文本颜色
* font-size:字体大小
* font-family:字体系列 ,类似HTML的<font>< /font>
中的face属性,但是可以指定多个字体样式
font-family表示使用的字体系列,多个字体用逗号分隔,例如“字体1,字体2,字体3”此时优先使用的是字体1,如果字体1系统不存在,再使用字体2,以此类推。
* font-weight:bold,字体加粗
*text-align:文字水平对齐方式。
* text-decoration:下划线等
*text-decoration: underline 下划线
* text-decoration: none 没有线 ,要写在伪类选择器中才有用
a:link{
color: deepskyblue;
text-decoration:none;
}
- text-decoration: line-through表示一条线从中间滑过
- text-decoration: overline-文字上方的线
2)背景属性
* background-color:背景色
* background-image:背景图片 background-image:url();(引用有三种,src,href,url,其中url只用于css中 )需要设置在body中
* background-repeat:平铺方式 ;重复背景图显示。也就是背景图片的 平铺方式。默认状态就是横向纵向都平铺;取值还有repeat-x,repeat-y,no-repeat横向、纵向、不平铺
* repeat:横向纵向都平铺
* repeat-x:横向平铺
* repeat-y:纵向平铺
* no-repeat:不平铺
* background : 颜色 图片 平铺方式(顺序随便) ;开发中的综合写法
background: red url() no-repeat;
3)列表属性
* list-style-type : 列表前面使用默认的图标
* list-style-image : url() ; 列表前面使用自定义的小图片 icon
4)边框和尺寸属性
边框属性
- border-width:边框的宽度
- border-style:边框的类型
- border-color:边框的颜色
border-width:10px;
border-color: red ;
border-style: solid; 实线
**border: 宽度 颜色 样式(顺序随便) 开发中的综合写法
边框变圆角:**
尺寸的属性
- width
- height
5)显示属性
* display :display,取值有三种 ,none,inline,block,none为不显示,block(块级标签显示)为每个div独占一行,inline行级标签显示;
* block:显示为块级元素
* inline:显示为行级元素
* none:不显示
选择器{
display:inline;
}
6) 浮动属性
脱离该HTML页面。
float:left
如果div中有内容就会环绕,而不会盖住。
清除浮动:clear:both;清除浮动带来的影响。
* float:浮动
* left
* right
* none
- clear:清除浮动
- left
- right
- both
CSS的盒子模型 也叫css框模型
一般为两个盒子
* padding
* 内边距:盒子边框距离盒子内部的元素的距离
margin
- 外边距:就是盒子的边框距离外部框架的边框或者外部盒子边框的距离。
- 外边距:就是盒子的边框距离外部框架的边框或者外部盒子边框的距离。
border
- 盒子边框
- border-width
- border-style
- border-color
- 实际开发中的简写
border:width style color
例子: