css笔记和代码
css
一、CSS简介
1.什么是CSS
css，Cascading Style Sheet 层叠样式表
是一种样式设置规则，用来控制页面的外观样式
2.为什么使用CSS
- 实现内容与样式分割，便于团队开发
- 样式复用，便于网站的维护
- 页面的精准控制，让页面更精美
3.CSS作用
- 页面外观美观
- 布局和定位
二、基本用法
1.CSS语法
<head>
<style>
选择器{
属性名：属性值；
属性名：属性值；
}
style>
head>
- 选择器：要修饰的对象(东西)
- 属性名：修饰对象的哪个属性(样式)
- 属性值：样式的取值
2.CSS应用方式
也成为CSS引用方式，有三种方式：内部样式、行内样式、外部样式
2.1内部样式
也被称为内嵌样式，在页面头部通过style标签定义
对当前页面当中所有符合样式选择器的标签都起作用
2.2行内样式
也被称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
2.3外部样式
使用单独的CSS文件定义，然后在页面中使用link标签或@import指令引入
-
使用
link标签链接外部样式文件(推荐用法)<link rel="stylesheet" type="texk/css" href="css样式文件路径">type属性可以省略
-
@import指令导入外部样式文件<style> @import "css样式文件路径" @import url(css样式文件的路径) style>
三、选择器
1.基础选择器
1.1标签选择器
也被称为元素选择器，使用HTML标签作为选择器名称
以标签名作为样式应用的依据
1.2类选择器
使用自定义名称，以.作为前缀，然后通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
注意事项：
- 调用时不能添加
. - 同时调用多个类选择器时以
空格分隔 - 类选择器定义时，名称不能以数字开头
1.3ID选择器
使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系
2.复杂选择器
2.1复合选择器
标签选择器和类选择器、标签选择器和ID选择器、一起使用
必须同时满足两个条件时才能应用
2.2组合选择器
集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号分开
2.3嵌套选择器
在某个选择器的内部在设置选择器，空格隔开
只有满足层次关系中最里层的选择器所对应的标签才会应用样式
注意:使用空格时，不区分父子还是后代，使用CSS3中新增的>时，必须时父子关系才行
2.4伪类选择器
四种状态：
:link未访问的:visited已访问的:hover鼠标移动到连接上，即悬浮在链接上active选定的链接，被激活
注意：默认为蓝色+下划线
2.5伪元素选择器
:first-lefter 为第一个字符的样式
:first-line 为第一行的样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加内容，需要配合content属性配合
3.选择器的优先级
3.1优先级
行内样式>ID选择器>类选择器>标签选择器
原因：首先加载标签选择器的样式，然后加载类选择器，接着加载ID选择器，最后加载行内样式。后加载的样式会覆盖前面的同名样式
3.2内外部样式加载顺序
就近原则
原因：按照我们书写的顺序依次加载，后加载的会覆盖先加载的，所以离得越近越优先
3.3!important
可以使用!important使某个样式有最高的优先级
四、常用CSS属性
1.字体属性
定义字体相关的样式
| 名称 | 含义 | 说明 |
|---|---|---|
| font-size | 字体大小 | 可以使用多种单位 |
| font-weight | 字体粗细 | |
| font-family | 字体名称 | |
| font-style | 字体样式 |
1.1font-size
取值：
- inherited继承 ，从父标签继承字体大小(默认)，所有的CSS默认值都是inherited
- px像素 pixel
- 百分比，是相对于父标签的百分比
- em倍数，相对于父标签的倍数
html默认字体大小为16px，也称基础字体大小
1.2font-weight
取值：
- normal普通(默认)
- bold加粗
- 自定义 400普通，700加粗
1.3font-family
要求系统内要安装指定的字体
一般三种以上，首先首选，其次，备用，多个之间逗号隔开
1.4font-style
取值:
- normal 普通
- italic斜体
1.5font
简写书写：font-style,font-weight,font-size,font-family
2.文本属性
| 属性 | 含义 | 说明 |
|---|---|---|
| color | 颜色 | |
| line-height | 行高 | |
| text-align | 水平对齐方式 | 取值:left,center,right |
| vertical-align | 垂直对齐方式 | 取值:top,middle,bottom可用于文字、图片的对齐 |
| text-indent | 首行缩进 | |
| text-decoration | 文本修饰 | 取值：underline、overline、line-through |
| text-transform | 字母大小写 | 取值：lowercase、uppercase、capitalize(首字母大写) |
| letter-spacing | 字符间距 | |
| word-spacing | 单词间距 | 只对英文有效 |
| white-space | 空白的处理方式 | 文本超出后是否换行，取值：nowrap |
2.1color
取值：四种写法
-
颜色名称：使用英文单词
-
16进制的RGB取值：#RRGGBB
#FFFFFF--->#FFF 白色 #000000--->#000 黑色 #FF0000--->#F00 红色 #00FF00--->#0F0 绿色 #0000FF--->#00F 蓝色 #CCCCCC--->#CCC 灰色 #FF7300--->无法简写 橙色不区分大小写
-
RGB函数：rgb(red green blue)
每个颜色的取值范围[0,255]
rgb(255,0,0)--->红 rgb(0,255,0)--->绿 rgb(0,0,255)--->蓝 -
rgba函数rgba(red,green,blue,alpha)
可设置透明度，alpha的取值范围[0,1] 0—>完全透明 1—>完全不透明
rgba(255,0,0,1) --->纯红色 rgba(255,0,0,0.5)--->红色半透明
3.背景属性
| 属性 | 含义 | 说明 |
|---|---|---|
| background-color | 背景颜色 | |
| background-image | 背景图片 | |
| background-repeat | 背景图片的重复方式 | |
| background-position | 背景图片的显示位置 | |
| background-attachment | 背景图片是否跟随滚动 | |
| background | 简写 |
3.1background-color
取值： transparent 透明
3.2background-image
- 必须使用url()方式指定图片
- 如果是在css样式文件中使用相对路径，此时是相对与css文件，不是相对于html
3.3background-repeat
取值：repeat (默认)、repeat-x，repeat-y，no-repeat
3.4background-position
默认在左上角
取值：
- 关键字：top、botton、left、right、center
- 坐标：左上角(0,0)坐标原点、向右为x的正方向、向下为y的正方向
css雪碧图，即CSS Sprites，也成为CSS精灵，是一种CSS图像合并技术
含义：将网页中许多非常小的图片整合到一张图片中，当访问该页面时，只需要下载一次，可以减少访问服务器的次数，进而提供访问的性能
原理：可以使用background-position进行背景定位，使用坐标精确定位背景图片的位置
3.5background-attachment
取值：scroll默认滚动、fixed固定
3.6backgroud
简写属性：background：background-color background-image background-position
书写顺序没有要求，空格隔开
4.列表属性
| 属性 | 含义 | 说明 |
|---|---|---|
| list-style-type | 设置列表前的标记 | |
| list-style-image | 将图像作为列表前的标记 | |
| list-style-position | 设置标签的位置 | 取值：outside(默认)、inside |
| list-style | 简写 |
4.1list-style-type
取值：none、disc、circle、square、decimal
此时不再区分有序列表还是无序列表，只要设置列表前标记就好了
4.1list-style
简写属性：list-style：list-style-type、list-style-image、list-style-position
书写顺序没有要求
5.表格属性
border-collapse 表格中相邻边框是否合并(折叠)为单一边框
取值:separate(默认)、collapse
#####6.使用LiveReload
可以实现当保存页面文件时实时刷新浏览器
步骤：
1.在Chrome浏览器中安装LiveReload扩展程序
将livereload文件解压–>在Chrome浏览器的右上角–>更多工具扩展文件–>打开开发者模式–>加载已解压的扩展程序–>勾选"允许访问所有网站留存数据"
2.在sublime中安装livereload插件
将livereload-sublime.rar解压到sublime的插件目录中
3.配置sublime中的livereload
preference–>packages setting–>livereload–>settings default
{
"enabled_plugins": [
"SimpleReloadPlugin"
"SimpleRefresh"
]
}
4.在浏览器中启用livereload
先打开要访问的页面，点开浏览器地址栏右边的黑色圆圈，当中心的小圆圈编程实心时，表示已启用
5.在sublime中启用livereload
按住crtl+shift-p–>搜索livereload，选择enable —> 选择simple reload ,选择enable
五、盒子模型
1.简介
盒子模型是网页布局的基础，将页面中的所有元素均看成一个盒子，包括几个属性:
- width 宽度
- height高度
- border 边框
- padding 内边距
- margin 外边距
2.盒子模型
2.1 border
盒子的边框，分为四个方向：top、right、bottom、left
border-top、border-right、border-bottom、border-left
每个边框都包含三个样式：color、width、style
border-top-color、border-top-width、border-top-style
样式的取值：
solid 实线 、dashed 虚线、 dotted 点线 、 double双线、inset内嵌3D线、outside外嵌3D线
简写三种方式：
-
方向：
border-top、border-right、border-bottom、border-left
书写顺序-方向：width style color
-
样式：
border-color、border-width、border-style
必须按照顺时针方向 border-样式：top、right、bottom、left
规则：如果省略，则认为上下一样，左右一样 -
终极简写
四个边框的样式完全相同，border：wdith、style、color
2.2 padding
表示的盒子的内边距，内容与边框之间的距离
同样也分为4个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）
注： 上下冲突，以上为主；左右冲突，以左为主
2.3 margin
表示盒子的外边距，即盒子与盒子之间的距离
同样也分为四个方向，也可以简写(按顺时针方向，默认上下一样，左右一样)
居中对齐：
/*元素的水平居中*/
/*块级元素的水平居中*/
margin:0 auto;
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */
text-align:center;
/* 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;
3.其它
3.1元素所占空间
页面中的元素实际所占的空间
- 宽度=width+左右padding+左右margin
- 高度=height+上下padding+上下margin
3.2盒子属性的默认值
不同标签的盒子属性默认值可能不同，需要自己进行设置
body,ul,ol,li,p,h1,h2,h3,h4,h6,form{
padding:0;
margin:0;
}
3.3外边距的合并
也成为外边距的折叠，指的是2个块级元素垂直外边距相遇时，他们将合并为一个外边距，合并后的外边距值为其中较大的值
两种情况：
- 当一个元素出现在另一个元素上面时，第一个元素的下边距与第二个元素的上边距会发生合并
- 当一个元素出现在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并
外边距的合并的好处：让排版在视觉上显得更美观
六、定位方式
1.简介
通过position属性来实现对元素的定位，有四种定位方式：
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| static | 默认 | 按照常规的文档流进行显示 |
| relative | 相对定位 | 相对于标签原来的位置进行定位 |
| absolute | 绝对定位 | 相对与第一个非static定位的父标签的定位 |
| fixed | 固定定位 | 相对于浏览器窗口进行定位 |
设置定位方式后，还要设置定位属性(偏移量)：top、bottom
2.相对定位
先设置元素的positon属性为relative，然后在设置偏移量
right：200px； 相当于 原来的在现在的右边200像素
3.绝对定位
先设置父标签为非static标签，然后设置元素的position属性，最后在设置偏移量
注意：
- 一般来说都会将父标签设置为非static定位
- 如果父标签不是static定位，则会相对于浏览器窗口进行定位
- 设置元素为绝对定位后，元素会浮到页面上方
4.固定定位
先设置元素的position属性为fixed，然后在设置偏移量
设置元素为固定定位后，元素会浮在页面上方
5.z-index
设置元素定位方式后，元素会浮在页面上，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序
取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)
注意：只能给非static定位的元素设置z-index属性
七、其它css属性
1.浮动和清除
1.1浮动
通过float属性来实现元素的浮动，可以让块级元素脱离常规文档流，向左或者向右移动，在同一行显示，如果一行不够则换行
常用取值：
- left
- right
- none 默认
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己的尺寸，如果还想显示父容器，通常会在末尾添加一个清除了float属性的空的div来显示
1.2清除属性
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素
常用取值：
- left左侧不允许出现浮动元素
- right右侧不允许出现浮动元素
- both两侧都不允许出现浮动元素
- none允许两次出现浮动元素 默认
结论：
- 对于非浮动元素，两边都可以设置清除属性（常用）
- 对于浮动元素，向哪边浮动，就只能设置向那边清除
2.元素的显示和隐藏
2.1display
通过display设置元素是否显示以及是否独占一行
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| none | 不显示 | |
| inline | 显示为内联元素，行级元素的默认值 | 将块级元素变为行级元素，不在独占一行 |
| block | 显示为块级元素，块级元素的默认值 | 将行级标签转换为块级元素，将独占一行 |
| inline-block | 显示为内联元素，但是可以设置高和宽 | 在inline基础上允许设置宽度和高度 |
注意：
行级元素无法设置宽度和高度，可以将行级元素设置dispaly为：inline-block，然后就可以设置高和宽了
2.2visibility
也可以通过visibility属性设置元素的显示和隐藏
常用取值：
| 取值 | 含义 | 说明 |
|---|---|---|
| visible | 显示 | |
| hidden | 隐藏 |
2.3区别
- display 隐藏是不在占据页面空间，后面的元素会占用其位置
- visibility隐藏会占据页面位置，位置还保留在页面当中，不显示
3.轮廓属性
3.1简介
轮廓 outline 用来在元素的周围绘制一个轮廓，位于border的外围，可以突出显示元素
3.2基本用法
常用属性:
- outline-width
- outline-color
- outline-style
- outline
在浏览器中，当鼠标单击或者TAB让一个表单或链接获得焦点，该元素会有一个轮廓
优点：可以提高使用表单的用户体验
缺点：有时会影响美观
3.3outline和border的区别
- border可应用于所有的html元素，而outline主要用于表单和超链接
- 当元素获得焦点时，会自动出现outline轮廓效果，当失去焦点时，自动消失，浏览器的默认效果
- outline不影响元素的尺寸和位置，而border会影响
4.其它属性
4.1宽高相关的属性
- max-width 设置元素的最大宽度
- max-height 设置元素的最大高度
- min-width
- min-height
4.2overflow
当元素内容溢出时该如何处理
常用取值：
- visible 溢出时可见，显示在元素外，默认
- hidden 溢出的部分不可见（常用）
- scroll 无论是否出现溢出，始终出现滚动条
- auto 溢出时自动出现滚动条
4.3cursor
用于设置光标的形状
常用属性：
- default 一般位箭头，默认
- pointer手性，光标移动到超链接时一般显示为手性
- text表示文本
- wait 程序正忙，需要等待
- help表示帮助
- move 可以移动
八、页面布局
1.简介
常见的页面布局：
- 表格布局
- div布局
2.表格布局
2.1简介
不适用于复杂布局，仅用于简单有规则的结构
定位相对准确，于浏览器基本无关，适用于简单分隔
2.2 用法
table常用样式的属性
- border在表格外围设置边框
- border-spacing设置单元格之间的距离，相当于table中的cellspacing属性
- border-collapse表格中相邻边框是否合并，取值：seprate(分离)、collapse(合并)
th/td常用样式属性：
- border为单元格设置边框
- padding设置单元格的内边距（相当于table中的cellpadding）
3.div布局
定位绝对精确，使用灵活，适合于复杂的布局方式
3.1简单布局
两种形式：
- 1：1：1布局
- 1：2 或者 3：1布局
3.2圣杯布局
页面的结构，两边的边栏宽度固定，中间的主体在一定范围内可自适应，并且主体优先被加载
一般防止页面缩放影响浏览，都会为页面设置最小宽度
3.3双飞翼布局
源自淘宝的UED（用户体验设计）
双飞翼布局和圣杯布局要实现的效果是相同的
圣杯布局和双飞翼布局的区别：
- 双飞翼布局比圣杯布局多创建一个div
- 双飞翼布局不用设置内边距padding和相对定位，也不用设置偏移量
- 双飞翼布局使用的是margin，圣杯布局使用的padding
实际开发中建议使用CSS3中的新增flex弹性盒子布局，更简洁
代码
02 css样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/* 内部样式 */
p{
color:red;
}
style>
<link rel="stylesheet" href="style/hello.css" type="text/css">
<style>
@import url(style/hello.css);
style>
head>
<body>
<p>welcome to CSS!p>
<p>欢迎来到CSS课堂p>
<h2 style="color: green;">web前端工程师h2>
<h2>JAVA开发工程师h2>
<div>嘿嘿div>
<div>哈哈div>
body>
html>
### 03基础选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/*1标签选择器*/
p{
color:red;
font-size:40px;
}
h2{
color:yellow;
}
.hello{
background:#cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:blue;
}
style>
head>
<body>
<p>welcome to CSS！p>
<p>hello world!p>
<h2>web前端开发h2>
<h3>java开发h3>
<hr>
<p class="hello">welcome to CSS！p>
<p>hello worldp>
<h2>web前端开发h2>
<h3>java开发h3>
<div >巩森div>
<div class="hello">巩森div>
<div class="hello world">巩森div>
<hr>
<h1 id="heihei">哈哈哈h1>
body>
html>
### 04 复杂选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/* 1标签选择器与类选择器结合起来 */
h1.aaa{
color:red;
}
/* b标签选择器和ID选择器结合 */
p#bbb{
color:yellow;
}
/* 2组合选择器： */
/* 分开写 */
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:#cccccc;
}
.ccc{
font-weight:bold;
}
/* 3嵌套选择器 */
div>p{
color:green;
text-decoration:underline;
}
div .ddd{
color:pink;
}
style>
head>
<body>
<h1 class="aaa">welcomeh1>
<h4 class="aaa">cssh4>
<h1>helloh1>
<hr>
<p id="bbb">
world
p>
<p>
html!
p>
<h2 id="bbb">web开发h2>
<hr>
<h1>helloh1>
<p>htmlp>
<div>web开发div>
<span class="ccc">java开发span>
<hr>
<div>
<p>
div内部的P标签
p>
<h3>div内部的h3标签h3>
div>
<hr>
<div>
<h2>
<p>div内部的h2内部的p标签p>
h2>
div>
<div>
<p>div内部的p标签p>
<h3 class="ddd">div内部的h3h3>
<p class="ddd">ppppp>
div>
body>
html>
### 05 伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/* a:link{
font-size:12px;
color:black;
text-decoration:none;
}
a:visited{
font-size:15px;
color:red;
}
a:hover{
font-size:20px;
color:yellow;
}
a:active{
font-size:40px;
color:#cccccc;
} */
a:link,a:visited{
font-size:13px;
color:#666666;
text-decoration:none;
}
a:hover,a:active{
color:#ff7300;
text-decoration:underline;
}
/* 普通标签也可以使用伪类选择器 */
p:hover{
color:yellow;
}
p:active{
color:red;
}
style>
head>
<body>
<a href="03.基础选择器.html"> IT教育a>
<p>css从入门到放弃p>
body>
html>
### 06伪元素选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
p:first-letter{
color:red;
font-size:20px;
}
p:first-line{
background:yellow;
}
p:before{
content:"haha";
}
p:after{
content:"heihei";
}
style>
head>
<body>
<p>hello worldp>
<p>
hello world
<br>
welcome to css
p>
body>
html>
### 07选择器的优先级
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
font-size:20px;
color:blue!important;
}
.hello{
font-weight:bold;
color:yellow;
}
#world{
color:red;
text-decoration:underline;
}
p{
color:yellow!important;
}
style>
<link rel="stylesheet" type="text/css" href="style/world.css">
head>
<body>
<div class="hello" ID="world" style="color:#ff7300">css从入门到放弃div>
<p>哈哈哈哈p>
body>
html>
### 08字体相关的属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
font-size:30px;
}
p{
/* font-size:20px; */
font-size:3em;
}
.hello
{
font-size:2em;
}
body{
font-size:62.5%;
}
ul li{
/* font-size:30px;
font-weight:400;
font-family:华文行楷,黑体,宋体;
font-style:italic; */
font:italic bold 20px 宋体;
}
style>
head>
<body>
<span>CSSc从入门到放弃span>
<p>
<span>CSS从入门到放弃span>
CSS从入门到放弃
p>
<hr>
<div>
我的DIV
<p>
<span>gongsenspan>
CSS从入门到放弃
p>
div>
<span class="hello">dddspan>
<hr>
<ul>
<li>嘿嘿li>
ul>
body>
html>
### 09文本相关的属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
p{
color:red;
background-color:rgba(0,255,0,0.8);
line-height:20px;
vertical-align:bottom;
}
img{
vertical-align:middle;
}
div{
text-indent:30px;
}
span{
text-decoration:line-through;
text-transform:capitalize;
letter-spacing:3px;
word-spacing:2px;
}
h3{
height:300px;
width:200px;
background-color:red;
white-space:nowrap;
overflow:hidden;
}
style>
head>
<body>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<p>welcome to CSSp>
<hr>
<img src="../../../project1/image/qq.jpg" alt="">
html和css很简单
<div>welcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcomSwelcome to CSSwelcome to o CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSdiv>
<hr>
<span>hello worldspan>
<hr>
<h3> to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to CSSwelcome to h3>
body>
html>
### 01背景属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/* div{
/* background-color:#cccccc;
*/ background-image:url(../../image/heihei.gif);
color:Red;
/* background-color:transparent; */
} */
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div>
<p>welcome to css welcome to cssp>
<p>welcome to css welcome to cssp>
<p>welcome to css welcome to cssp>
<p>welcome to css welcome to cssp>
<p>welcome to css welcome to cssp>
div>
<hr>
<p class="cart">p>
购物车
body>
html>
### 02列表属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
/* li{
list-style-type:decimal;
} */
.first{
list-style-type:decimal;
}
.second{
list-style-type:circle;
}
.third{
list-style:none;
}
.fourth{
list-style:square url(../../image/heihei.gif) inside;
}
.nav{
list-style:none;
/* float:left; */
}
.nav li{
list-style:none;
float:left;
width:40px;
}
style>
head>
<body>
<ul>
<li class="first">helloli>
<li class="second">helloli>
<li class="third">helloli>
<li class="fourth">helloli>
ul>
<hr>
<nav>
<ul class="nav">
<li>新闻li>
<li>音乐li>
<li>地图li>
<li>视频li>
ul>
nav>
body>
html>
### 03 表格属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
table{
width:500px;
border:1px solid red ;
border-collapse:separate;
}
td{
border:1px solid red;
}
style>
head>
<body>
<table bordercolor="red" cellpadding="０" cellspacing="0">
<tr>
<td>1ad2atd>
<td>123da333datd>
<td>tdsssd达到打td>
<td>td4大大td>
tr>
<tr>
<td>da1123dastd>
<td>td2td>
<td>td34td>
<td>td4td>
tr>
<tr>
<td>td123td>
<td>td2td>
<td>td3td>
<td>td4td>
tr>
<tr>
<td>td123td>
<td>td2td>
<td>td3td>
<td>td4td>
tr>
<tr>
<td>td1td>
<td>td2td>
<td>td3td>
<td>td4td>
tr>
table>
body>
html>
### 04盒子模型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
p{
width:250px;
background:#cccccc;
}
.first{
/* border-top-color:Red;
border-top-width:1px;
border-top-style:dotted;
border-right-color:blue;
border-right-width:2px;
border-right-style:dashed;
border-bottom-color:green;
border-bottom-width:3px;
border-bottom-style:dashed;
border-left-color:gray;
border-left-width:4px;
border-left-style:dotted; */
/* border-top:1px solid red;
border-bottom:2px dotted blue; */
/* border-color:red blue pink;
border-width:1px 2px 2px 1px;
border-style:solid dashed; */
border:1px dotted red;
padding:20px;
margin:10px;
}
.second{
padding:5px;
}
.third{
/*元素的水平居中*/
/*块级元素的水平居中*/
margin:0 auto;
/* 提示：块级元素必须指定宽度 */
/* 2.文本的水平居中 */
text-align:center;
/* 3.垂直居中，将height和line-height设置为相同 */
height:100px;
line-height:100px;
}
style>
head>
<body>
<p class="first">welcome to cssp>
<p class="second">welcome to HTMLp>
<p class="third">welcome to JAVASRIPTp>
body>
html>
### 05盒子模型默认止
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
margin:0;
}
p{
margin:0;
}
ul{
list-style:none;
padding:0;
margin:0;
}
body,ul,ol,li,p,h1,h2,h3,h4,h6,form{
padding:0;
margin:0;
}
style>
head>
<body>
welcome to css!
<br>
<p>hello worldp>
<ul>
<li>hello1li>
<li>hello2li>
<li>hello3li>
ul>
body>
html>
### 06外边距的合并
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
div{
width:50px;
height:50px;
background:#cccccc;
}
.div1{
margin-bottom:20px;
}
.div2{
margin-top:30px;
}
.div3{
width:100px;
height:100px;
background:blue;
}
p{
margin:20px 0;
}
style>
head>
<body>
<div class="div1">div1div>
<div class="div2">div2div>
<hr>
<div class="div3">
<div class="div4">div>
div>
<hr>
<p>
<p>p1p>
<p>p2p>
<p>p3p>
<p>p4p>
<p>p5p>
p>
body>
html>
### 07定位方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
#container{
width:800px;
border:1px solid black;
position:relative;
}
.div1,.div2,.div3,.div4{
width:50px;
height:50px;
}
.div1{
background:blue;
position:relative;
top:20px;
}
.div2{
background:green;
position:absolute;
right:50px;
}
.div3{
background:red;
}
.div4{
background:yellow;
}
style>
head>
<body>
<div id="container">
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
div>
body>
html>
### 08浮动和清除
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
#container{
width:800px;
height:50px;
border:1px solid red;
}
.div1,.div2,.div3,.div4{
width:300px;
}
.div1{
background:blue;
float:left;
}
.div2{
background:green;
float:left;
}
.div3{
background:red;
float:left;
}
.div4{
background:yellow;
float:left;
}
.clr{
clear:both;
}
style>
head>
<body>
<div id="container">
<div class="div1">div1div>
<div class="div2">div2div>
<div class="div3">div3div>
<div class="div4">div4div>
<div class="clr"> div 5div>
div>
body>
html>
### 09练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
margin:0;
padding:0;
}
#container{
width:960px;
margin:0 auto;
border:2px solid #0f0;
}
.div1,.div2,.div3,.div4{
width:200px;
height:180px;
float:left;
margin:5px;
border:5px outset #ff7300;
padding:10px;
}
#container img{
width:100%;
height:100%;
}
#container .clr{
clear:both;
}
style>
head>
<body>
<div id="container">
<div class="div1"><img src="../../image/adv1.jpg" alt="">div>
<div class="div2"><img src="../../image/adv2.jpg" alt="">div>
<div class="div3"><img src="../../image/adv3.jpg" alt="">div>
<div class="div4"><img src="../../image/adv4.jpg" alt="">div>
<div class="clr">div>
div>
<p>welp>
body>
html>
### 01元素的显示和隐藏
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.div1{
width:100px;
height:100px;
background:red;
display:inline;
}
span{
background:yellow;
width:100px;
height:100px;
/* display:block; */
/* 设置浮动float:left; */
display:inline-block;
}
i{
height:100px;
width:100px;
background:red;
display:inline-block;
}
p{
width:50px;
height:50px;
background:red;
}
.p1{
visibility:visible;
}
.p2{
visibility:hidden;
}
#login{
display:inline-block;
text-decoration:none;
width:100px;
background:rgb(255, 0, 0,0.7);
color:#fff;
padding:10px;
text-align:center;
border-radius:9px;
}
#login:hover{
background:rgb(255, 0, 0,0.3);
}
style>
head>
<body>
<div class="div1">div1div>
<span>cssspan>
<i>hehe i>
<hr>
<p class="p1">p1p>
<p class="p2">p2p>
<hr>
<a href="javascript:alert('haha')" id="login">登录a>
body>