一.CSS简介
二.CSS选择器
三.CSS常用属性(8个属性)
四.CSS盒子模型
一.CSS简介
层叠样式表
样式表用来将HTML页面变得更加美观 网站的整体样式通常都是放在.css文件中
作为网站中所有页面的通用样式调用统一的样式 能够让网站变的颜色 样式 效果更统一
基本语法
主要分成两部分组成
1.选择器
主要是为了确定要改变样式的是哪一个HTML元素
2.一条或者多条声明
每一条声明 由属性 和一个值组成
使用花括号{}括起来
属性和 值之间 使用冒号分开
例如:
h1{
color:red;
font-size:12px;
}
h1就是选择器，里面的是声明
CSS样式表中值的单位:
px 像素
% 百分比
cm 厘米
in 英寸
em 等于当前字体的尺寸
pt 磅（粗细）
CSS样式表中的颜色:
直接写颜色例如：red
rgb(x%,y%,z%)
#ff0000 十六进制数
饱和度
导入CSS的三种方式
1.内联样式表
在HTML标签中使用 style 属性 来设置样式
2.内部样式表
写在style标签中 通常将该标签写在 head中(可以写在任何地方,但通常style写在head中)
3.外部样式表
在外部写一个.css样式表文件 将css样式单独写在里面
通过使用link标签 在html中引入CSS样式
优先级
理论上 内联样式表 > 内部样式表 > 外部样式表
实际上 内部样式表 和 外部样式表
是有执行顺序的 谁离代码更近 谁的优先级就高
----------------------------------------------------------------------------------------------------------------
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--方式3.内联样式表-->
<link rel="stylesheet" type="text/css" href="D:\java20180901\test1\mycss.css" />
<title>css样式表引入方式</title>
<!--方式2.内部样式表-->
<style>
div{
width: 150px;
height: 150px;
color: white;
}
</style>
</head>
<body>
<!--方式1.内联样式表-->
<div style="width:100px;height:100px;color:red">第一块</div>
<div>第二块</div>
<hr />
<div>第三块</div>
</body>
</html>
ps：在style中不能用<!-- -->来注释，要用/* */
-------------------------------------------------------------------------------------------------------------------
二.CSS选择器（非常重要）
在CSS中有三种基本选择器
1.类选择器 以 . 开始 在HTML标签中 以class属性来调用
2.id选择器 以 # 开始 在HTML标签中 以id属性来调用
3.标签选择器 以HTML标签作为选择器 给HTML中所有该标签的样式都设置为同一个
-------------------------------------------------------------------------------------------------------
例：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*1.id选择器*/
#id1{
color: yellow;
font-size:50px;
}
/*2.class选择器*/
.class1{
color: red;
font-size: 50px;
}
/*3.class选择器*/
h5{
color: blue;
}
</style>
</head>
<body>
<div id="id1">这是一个id选择器</div>
<div class="class1">这是一个类选择器</div>
<h1>h1hahah</h1>
<h2>h2hahahha</h2>
<h3>h3haha</h3>
<h5>h5hahaha</h5>
</body>
=====================================================================
类选择器 和 id选择器的区别
id在HTML页面中只能使用一次 js中要用（一个页面只能有一个id名）
class在HTML页面中可以多次使用
HTML标签中
name属性 用来进行表单提交
只有填写了name属性 才能从服务器获取到对应的值
id属性 用于javascript的操作
可以确定操作的是哪一个具体的标签项
优先级:
id选择器 > 类选择器 > 标签选择器
属性选择器
根据元素的属性 及 属性值 来选择元素 在head中使用style标签引入
html标签[属性]{
css属性:css属性值;
}
==============================================================
例：
input[type="type"]{
background: red;
}
</style>
</head>
<body>
<div id="id1">这是一个id选择器</div>
<div class="class1">这是一个类选择器</div>
<h1>h1hahah</h1>
<h2>h2hahahha</h2>
<h3>h3haha</h3>
<h5>h5hahaha</h5>
<form name="login" action="#" method="get">
<font size="3">用户名：</font>
<input type="type" name="username" value="zhangsan" /><br />
密码
<input type="password" name="ps" value="123456" /><br />
<input type="submit" value="登陆" />
=============================================================
当出现多层html标签嵌套时该如何使用选择器呢？
格式：选择器1 空格 选择器2{ }
<style>
#div1 .div11{
color: blue;
}
</style>
</head>
<body>
<div id="div1">
<div class="div11"><span>span-1</span></div>
<div class="div11"><span>span-2</span></div>
</div>
<div class="div2">
<div id="div21"><span>span-3</span></div>
<div id="div21"><span>span-3</span></div>
</div>
==============================================================
伪元素选择器
主要针对的是a标签
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
三.CSS常用属性(8个属性)
1.文字属性
font-size 设置文字大小
font-family 文字的字体类型 黑体...
font-style 规定 斜体字 常见的值: normal正常 italic 斜体 oblique 倾斜
font-weight 设置文本的粗细 100-900 9级加粗
100最细 900最粗
400 normal 700 bold <b>
2.文本属性
text-indent 缩进元素中文本的首行 取值类型两种
5em 第一行表示缩进5个字符的宽度
20% 第一行缩进父容器宽度的百分之二十
text-decoration
none 关闭原本应用在一个元素上的所有装饰
underline 添加下划线
overline 在文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线
text-align
一个元素中文本行互相之间的对齐方式
left right center
word-spacing 字符之间的间距
letter-spacing 单词或者字母之间的间距
line-height 行高 25px~32px之间
color 设置文本颜色
3.背景属性
background-color 背景颜色 默认是透明的
background-image:url("图片路径")背景图片
background-repeat
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
repeat 在水平和垂直方向都平铺
no-repeat 不平铺
background-position 改变图像在背景中的位置
top bottom left right center
background-position x y 定义背景图片的起始位置
如果把一个div的区域解释为一个坐标轴
左顶点就是 x=0 y=0
背景图
向左 向上 移动 为负值
向右 向下 移动 为正值
4.轮廓属性
绘制于元素周围的一条线 位于边框边缘的外围
可以起到突出显示元素的作用
outline-style: solid 实线 dotted 虚线 dashed 虚线 每段都很长 double 空心
outline-color:设置轮廓的颜色
outline-width:设置轮廓的宽度
5.尺寸属性
width 设置元素的宽度
height 设置元素的高度
6.浮动属性
float 浮动
控制元素如何显示 设置图像显示于另一个元素中的何处
相对于正常位置来说
float 定义元素向哪个方向浮动
clear 清除浮动
规定元素的哪一侧不允许其他元素浮动
1.当设置为浮动属性后 区块会脱离原有的文档流 按照float设置 向xx方向浮动
2.当设置了多个区块的浮动属性后 那么会造成一种 一个挨着一个横向显示的效果
3.当设置了浮动 文字会出现环绕浮动块的效果
4.如果外层容器的宽度是固定的 那么一行浮动不下了 就会挤到下一行
clear值 描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧都不允许浮动元素
none 默认值 允许浮动元素出现在两侧
7.定位属性
position 允许你对元素进行定位
absolute 绝对定位
元素框从文档流完全删除 并相对于其包含块定位
包含块可能是文档中的另一个元素 或者 初始包含块
relative 相对定位
相对定位 会按照元素的原始位置 对该元素进行移动
fixed 固定定位
元素框的表现类似于absolute 不过其包含块是视窗本身
fixed是一种特殊的absolute
fixed总是以body为定位
按照浏览器的窗口进行定位
fixed 和 absolute的区别 很简单
1.在没有滚动条的情况下 没区别
2.在有滚动条的情况下
fixed的定位不会随着滚动条的移动而移动
absolute则会则会随着滚动条移动
可理解为 fixed 固定在当前 窗口 不动
absolute 会随着参照对象的高度和宽度变化而变化
8.列表属性
列表属性允许你设置 改变 列表项标志 或者将图像作为列表项添加进去
list-style 简写属性
list-style-image 定义列表项标志位图像
list-style-position 定义列表项标志的位置
list-style-type 定义列表项标志的类型
四.CSS盒子模型
1.border 边框
边框 围绕元素内容和内边距的一条或者多条线
border 简写属性
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-top 上
border-right 右
border-bottom下
border-left 左
HSLA
Hue(色调) 0 或者 360表示红色
120表示绿色
240表示蓝色
可以通过取值来定义颜色
Saturation(饱和度)取值为 0.0% ~100.0%
Lightness(亮度) 取值为 0.0% ~ 100.0%
Alpha(透明度) 取值 0-1之间
box-shadow 阴影
h-shadow 水平阴影的位置 允许负值 必须
v-shadow 垂直阴影的位置 允许负值 必须
blur 模糊距离 可选
spread 阴影的尺寸 可选
color 阴影的颜色 可选
inset 外部阴影改为内部阴影 可选
2.margin 外边距
围绕在元素边框外的空白区域 设置外边距
设置外边距之后 会在元素边框外创建额外的"空白"
margin 简写 在一个声明中设置所有外边距
上右下左
margin-top
margin-right
margin-bottom
margin-left
3.padding 内边距
元素到边框之间的距离 会在元素外创建额外的"空白"
padding 简写模式 上右下左
padding-top
padding-right
padding-bottom
padding-left