HTML-CSS基础
HTML CSS基础
01.CSS写咋哪里
css一般卸载三个地方
- 元素标签的style属性中设置
- html文档的标签中设置
- 在.css文件中设置 link引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="0604-02-CssStyle.css">
<style>
</style>
<title>Document</title>
</head>
<body>
<div style="width: 100px;height: 80px;background-color: #707070;"></div>
</body>
</html>
02.CSS语法格式
- css语法是由特征和值成对出现的
- 每组特征值之间用 ; 隔开
- 除了在元素标签的style属性设置外，另外两种必须写在{}内
2.1 CSS语法
在style属性中
<div style="特征值1: 值1;特征值2: 值2;"></div>
在.css文件或style标签中
元素选择器{
特征值1: 值1;
特征值2: 值2;
}
2.2CSS选择器
通过元素名获取
通过元素id属性获取
通过元素class属性获取
<div>div1</div>
<div id="div1">div2</div>
<div class="div2">div3</div>
div{
width: 100%;
height: 80px;
background-color: #d6d6d6;
}
#div1{
background-color: #707070;
}
.div2{
background-color: #d6d6d6;
}
2.3其他选择器
对父节点下所有子节点赋样式： 父级 子级
对父节点下 子节点赋样式： 父级>子级
对当前节点之后的元素赋样式
2.4伪类选择器
:hover 鼠标经过时设置其样式
:active 师表下按时设置其样式
:visited 先择已访问的链接，并设置其样式
<ul>
<li id="li1">经过</li>
<li id="li2">按下</li>
<li id="li3"><a href="#">点击过后</a></li>
</ul>
ul li{
background-color: #d6d6d6;
}
ul #li1:hover{
background-color: #707070;
}
ul #li2:active{
background-color: #707070;
}
ul #li3 a:visited{
color: #f2f2f2; ;
}
03.CSS优先级
- style属性中定义的样式优先级最高
- 就近原则
- id选择器> class选择器 > 标签选择器
04.常用样式
4.1 盒子模型
标签元素排列规则是从左往右，从行往下排列
4.2 盒子样式
- border边框
border: 粗细 颜色 线条类型
border-top/bottom/left/right: - margin 外边距
margin: 上右下左
margin-top/bottom/left/right: - padding 内边距
padding: 上右下左
padding-top/bottom/left/right:
4.3 文本样式
font: 字体 颜色 大小 粗细 对齐 装饰
- font-family: 微软雅黑
- font-size: 12px
- font-weight: bold
- text-align: left/center/right
- line-height: 数值
- text-decoration: none/underline/overline/line-through
4.4 背景样式
background: 背景色 背景图片 图片坐标 背景尺寸 图片重复方式
- background-color: #ffffff | rgb(255.255.255) | white
- background-image: url
- background-position: x% y% | xpos ypos | top center
- background_size: length | percentage | conver | contain
- background-repeat: repeat | repeat-x | repeat-y | no-repeat
4.5 图片样式
vertical-align: top | middle | bottom
此处对其方式并非图片相对于父元素的对其，而是其他元素相对于图片的对其方式
4.6 布局样式
文档流
文档流及文档的排列方式，在同一个平面中从左往右，从上往下排列
脱离文档流简单的理解为盒子脱离原有的文档排列方式，从同一平面中浮起来
浮动
float:left | right
定位
postition: absolute | fixed | relative | static | sticy(h5)
绝对定义是以浏览器作为参考系，但是如果绝对定位的元素在非静态定位中，那么就以这个元素为参考
盒子层次
z-index属性，数值越高，越在顶层
呈现形式
block: 块级标签 可设置宽高，元素独占一行
inline: 行级标签，不可设置宽，高，元素自适应的内部内容
inline-block: 介于block 与 inline 之间，可设置宽高，但是不会独占一行
表格线框
border-collapse: separate | collapse
- sepatate：默认值。边框会被分开，不会忽略border-spacing和 empty-cells属性
- collapse: 边框会合并为一个单一的边框
border-spacing:[length]
- 规定相邻单元的边框之间的距离
- 如果定义一个length，那么定义的水平和垂直间距，如果是两个则分开计算。
