CSS基础与总结
一.初始CSS
1.什么是CSS
- CSS:层叠样式表(Cascading Style Sheet)是由一堆选择器和属性组成。
- CSS有两个版本:CSS2.0 和 CSS3.0,CSS3.0是CSS2.0的设计版本,增加了一些选择器和属性。
- CSS的主要作用是用来美化html(超文本标记语言),通过浏览器渲染出一张张美丽的网页。
2.CSS布局的优点
1.用户体验好,视觉体验极佳,网站的性能高。
2.便于网站的更新升级,维护性好。
3.便于团队开发。
4.能够适应不同的显示器。
二.CSS基本语法
1.引入CSS的三种方式
- 行内样式(直接写在标签中格式:styel=" ")
<div style="width: 200px;height: 200px;border:1px solid red";> </div>
- 内部样式(写在<.style>标签中,<.style>写在head部分)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> . box { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="box"> </div> </body> </html>
- 外部样式(通过<.link>标签引入外部样式)
<link rel="stylesheet" href="./css/index.css">
2.CSS选择器
1.id选择器
<style> #box { width: 200px; height: 200px; border: 1px solid red; } </style>
2.类选择器
<style> .box { width: 200px; height: 200px; border: 1px solid red; } </style>
3.标签选择器
<style> p { width: 200px; height: 200px; border: 1px solid red; } </style>
4.后代选择器
<style> .box p { width: 200px; height: 200px; border: 1px solid red; } </style>
5.交集选择器
<style> .box.p { width: 200px; height: 200px; border: 1px solid red; } </style>
6.分组选择器
<style> .box,p { width: 200px; height: 200px; border: 1px solid red; } </style>
7.伪类选择器
<style> .box:hover { width: 200px; height: 200px; border: 1px solid red; } </style>
3.CSS属性
3.1表格类的属性
- 设置边框 border = “xx”
- 设置单元格间距 cellspacing = " xx"
- 设置背景颜色 bgcolor = “xx”
- 设置对齐方式 align = " xx" left:左对齐,center:居中 ,right: 右对齐
- 设置宽高 width height
3.2表单类的属性
- 设置表单的type = “xx” 属性值: button checkbox file hidden image password radio resets ubmit text
- value 规定 input 元素的值。
- width height 设置宽和高
- placeholder 帮助用户填写输入字段的提示
3.3列表类的属性
- width height 设置宽和高
- 经典应用 list-style: none 去除默认的小点
3.4 字体类的属性
- font-style 设置字体样式
- font-size 设置字体大小
- text-align 设置字体再盒子中的对齐方式
- color 设置字体颜色
- line-height 设置行高 经典应用 用来设置字体在盒子中垂直居中,行高等于盒子的高度
3.5文本类的属性
- line-height 设置文本的行高
- color 设置字体颜色
- font-size 设置字体大小
三.盒子模型
1.盒子的六大属性
- 盒子的内容 width height
- 盒子的内填充 也叫补白
padding 10px 表示上 右 下 左 的padding为10px
padding 10px 20px 表示上 下 padding 为10px 左 右 的padding为20px
padding 10px 20px 30px 表示上 padding 10px 左 右 padding 为10px 下 padding为30px
padding 10px 20px 30px 40px 表示上 padding 为10px 右 的padding为20px 下padding 30px 左 padding 40px- 盒子的边框 border
- 盒子的外边距 margin 经典应用 margin:0 auto;设置盒子水平居中。
margin 10px 表示上 右 下 左 的 margin 为10px
margin 10px 20px 表示上 下 margin 为10px 左 右 的 margin 为20px
margin 10px 20px 30px 表示上 margin 10px 左 右 margin 为10px 下 margin 为30px
margin 10px 20px 30px 40px 表示上 margin 为10px 右 的 margin 为20px 下 margin 30px 左 margin 40px- 盒子的背景 background 背景颜色 background-color ,背景图片 background-imge
2.盒子的分类
盒子可分为 块级元素,行内元素,行内块元素。
块级元素:独占一行 可设置宽高, 主要有 hn p 表格类的标签 列表的标签…
行内元素:并排显示 不可设置宽高,宽度由盒子内的内容撑开 可以设置左右的margin和padding, 但是不可以设置上下的margin和padding 。主要有 a strong em span …
行内块元素:除了可以并排显示 还具有块级元素的特点,主要由 input image …
四.浮动布局
1.浮动布局的特点
- 浮动的初衷是用来实现字围效果。
- 浮动的元素半脱离标准文档流,可以让块级元素并排显示
- 两个浮动的元素会紧紧的贴在一起,如果后面的空间不够的话,它会自动换行。
- 行内块元素浮动起来后,半脱离标准文档流,可以设置宽和高
2.浮动元素带来的影响
- 对兄弟元素的影响
浮动可以让后面紧挨着的兄弟元素钻上去,但是文字不会,只是形成字围效果。可以用clear:both;清除浮动带来的影响。- 对父盒子的影响
如果父盒子没有设置高度,且里面的子盒子全部浮动,则会造成父盒子塌陷(即高度为0)。解决塌陷的方法是在父盒子上加 overflow:hidden;清除浮动。- 浮动的元素不会对前面的盒子产生影响。