css基础（一）
1.css概述
2. html引入css的3种方式
3.css三种基本选择器
4.css四种复合选择器
5.文本font相关的属性
6.字体font-family的表达方式
7.标签分类(显示方式)
8.元素之间的转换
9.css三大特性
10.链接伪类
11.背景属性
12.背景属性demo
13.行高line-height
14.盒子模型--边框
15.练习边框--表单控件案例
16.盒子模型--内边距
17.案例：新浪导航
18.盒子模型--外边距
1.css概述 <--返回目录
* CSS 指层叠样式表(Cascading Style Sheets), 是用来美化html标签的
2. html引入css的3种方式 <--返回目录
* 【外链式】html引入css样式表的位置
<head>
<link rel="stylesheet" type="text/css" href=""/>
</head>
* 【行内样式】
<h1 style="font-size:20px;color:red;" >文本</h2>
* 【内嵌式】
<head>
<style type="text/css">
样式表写法
</style>
</head>
* 三种写法特点:
- 内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
- 外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
- 行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
3.css三种基本选择器 <--返回目录
* 选择器 {
属性名:属性值;
属性名:属性值;
}
* 属性
属性 解释
width:20px; 宽
height:20px; 高
background-color:red; 背景颜色
font-size:24px; 文字大小
text-align:left | center| right |justify 内容的水平对齐方式
text-indent:2em; 首行缩进
color:red; 文字颜色
word-spacing:20px 英文单词的间隔
letter-spacing; 字符(英文字母和中文)之间的间隔
* 基础选择器--标签选择器
<head> <style type="text/css"> /* 注释 */ div { font-size:20px; color:red; background-color:green; width:300px; height:200px; } </style> </head> <div>文本一</div> <div>文本二</div>
* 颜色的显示方式
- 直接写颜色的名称，比如red，yellow，pink
- 16进制显示颜色 #000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
** 或 color:rgb(255,68,0); 或#F40
** #000黑色 #009900深绿色 #fff白色 #333深灰色 #eee浅灰色
** 可以使用firework吸取颜色
** color:rgba(255,255,0,0~1); 0完全透明 0.5半透明
* 基础选择器--类别(class)选择器
<head> <style type="text/css"> /* 注释 */ .one { font-size:20px; color:red; width:300px; height:200px; } .two { background-color:green; } </style> </head> <div class="one two">文本一</div> <p class="one">文本二</p>
- 特点：
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。
- 类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名
- 常用的css命名推荐
头：header
内容：content/container
尾，页脚：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
* 基础选择器--id选择器
- 写法：#自定义名称{属性:值;}
- 特点：
** 每个id命名都是唯一的。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
** 一个标签只能调用一个ID选择器。
** 一个标签可以同时调用类选择器和ID选择器。
* 基础选择器--通配符选择器(了解，不推荐使用)
- *{属性:值;}
- 特点：给所有的标签都使用相同的样式。
- 不推荐使用，增加浏览器和服务器负担。
- 为了方便，有时这样使用
*{
margin:0;
padding:0;
}
4.css四种复合选择器 <--返回目录
* 交集选择器
- 格式：标签+类（ID）选择器{属性：值；}
- 例子：
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ font-size:50px; } div.box{ /* <div class="box"> */ color:red; } div#miss{ /* <div id="box"> */ width: 400px; height: 300px; background-color:yellow; } </style> </head> <body> <div class="box">aaa</div> <p class="box">bbb</p> <div id="miss">ccc</div> </body>
* 后代选择器
- 格式：选择器+空格+选择器{属性：值;}
- 后代选择器首选要满足包含（嵌套）关系。
- 父集元素在前边，子集元素在后边。
- 特点：
** 【无限制隔代】
** 只要能代表标签，标签、类选择器、ID选择器自由组合。
* 子代选择器(了解，一般可以用后代选择器替代)
- 格式：选择器>选择器{属性:值;}
- 选中【直接下一代】元素。
- 例子：
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div>span{ color:red; font-size:40px; } p>span{ color:green; font-size:60px; } </style> </head> <body> <div> <p><span>xxx威武</span></p> <span>xxx霸气</span> </div> </body>
* 并集选择器
- 格式：选择器,选择器,选择器{属性:值;}
- 例子：
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> box,#miss,span,h1{ font-size:100px; color: #fff; background-color: green; } </style> </head> <body> <div class="box">xxx威武</div> <p id="miss">xxx霸气</p> <span>xxx帅气</span> <h1>xxx漂亮</h1> </body>
5.文本font相关的属性 <--返回目录
* color:文字颜色
* font-size:16px; 文字大小
* font-weight:700; 文字粗细
- 值从100-900 文字加粗
- font-weigth:bold; 加粗，不推荐使用
* font-family:宋体|微软雅黑; 文本字体
* font-style:normal|italic 文本格式
- normal默认值
- italic 斜体
* line-height:40px; 行高
line-height:1.5; 1.5倍行高
* 属性连写(简写)
- font:[italic] [700] 16px/40px 微软雅黑;
- italic 700可以换顺序，后面的不能换顺序
- 文字大小和字体为必写项
* text-decoration:none无装饰, underline下划线, line-through 删除线, overline 上划线】
* text-align:left | center| right |justify 内容的水平对齐方式
- justify两端对齐
* text-indent:2em; 首行缩进
* text-decoration: none|underline|line-through|其他
- none 没有下划线修饰
- underline 下划线修饰，默认
- line-through 中间横贯线
6.字体font-family的表达方式 <--返回目录
* 直接写中文名称：font-family: 微软雅黑;
* 写字体的英文名称：font-family: microsoft yahei;
* unicode编码：font-family: \5B8B\4F53
7.标签分类(显示方式) <--返回目录
* 块元素
- 比如：div,h1-h6,p,ul,li
- 特点：
** 独占一行
** 可以设置宽高
** 嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。
* 行内元素
- 比如：span,font,a, strong,em,del,ins
- 特点：
** 在一行上显示
** 不能直接设置宽高
** 元素的宽和高就是内容撑开的宽高。文本默认16px。
* 行内块元素(内联元素)
- 比如：input, img
- 特点：
** 在一行上显示
** 可以设置宽高
8.元素之间的转换 <--返回目录
* 块元素转成行内元素
- div,p{display:inline;}
- 具有行内元素的特性，在一行显示，不能设置宽高
* 行内元素转块元素
- display:block;
* 块和行内元素转行内块元素
- display:inline-block;
9.css三大特性 <--返回目录
* 层叠性
- 当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。
- 注意：这里看得是，css代码的顺序;与标签调用选择器的顺序没有关系。
- 例子：
<style type="text/css"> .box2{ font-size: 200px; color: blue; } .box{ font-size: 60px; color: red; } </style> <div class="box box2">14威武</div>
- 结果：红色。
* 继承性
- 继承性发生的前提是包含（嵌套关系）
- 文字的所有属性都可以继承（包括：文字颜色、大小，粗细、字体、风格、行高）
- 特殊情况：
** h系列不能继承文字大小。
- h1在继承font-size后*2em再显示
- h1在继承font-size后*1.5em再显示
** a标签不能继承文字颜色。
* 优先级
- 默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
0 1 10 100 1000 1000以上
- 特点：继承的权重为0。如果自己定义了样式，使用自己的，不用继承来的样式。自己没有定义的，使用继承的。
- 权重会叠加
10.链接伪类 <--返回目录
* a:link{属性:值;} 链接默认状态
- 与a{属性:值}效果是一样的
* a:visited{属性:值;} 链接访问之后的状态(鼠标点击放开后)
* a:hover{属性:值;} 鼠标放到链接上显示的状态(鼠标悬停)
* a:active{属性:值;} 链接激活的状态(鼠标按住不放)
* :focus{属性:值；} 获取焦点
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .nav{ height: 50px; width: 90%; margin:0 auto; /*div在屏幕居中显示*/ text-align: center; /*文本居中*/ background-color:#aaa; } a{ text-decoration:none; /*去除文本下划线*/ font-size: 14px; font-weight: 700; color: #3c3c3c; width:100px; height:50px; display: inline-block; /*行内元素转行内块元素*/ } a.one{ color: #ff4400; } a:hover{ text-decoration: underline; color: #ff4400; background-color: #D5D7DD; } </style> </head> <body> <div class="nav"> <a href="#" class="one" title="天猫">天猫</a> <a href="#" class="one" title="聚划算">聚划算</a> <a href="#" class="one" title="超市">超市</a> <a href="#" class="one" title="头条">头条</a> <a href="#" title="阿里旅行">阿里旅行</a> <a href="#" title="电器城">电器城</a> <a href="#" title="淘抢购">淘抢购</a> <a href="#" title="苏宁易购">苏宁易购</a> <a href="#" title="智能生活">智能生活</a> </div> </body> </html>
效果：
11.背景属性 <--返回目录
* background-color:blue; 背景颜色
* background-image:url("1.png"); 背景图片
* background-repeat:repeat|no-repeat|repeat-x|repeat-y;
- repeat 平铺，默认
- no-repeat 不平铺
* background-position:left|right|center|top|bottom;
- background-position:left 【center】; 写一个的时候，默认有【center】
- background-position:left bottom; 左下角，left bottom顺序没有要求
- background-position:20px 【center】;距左侧20px，默认有【center】
- background-position:20px 30px;距左侧20px，距上侧30px
* background-attachment:scroll|fixed;背景是否滚动
- fixed图片的定位是基于浏览器
- scroll图片的定位是基于div,默认是scroll
背景属性连写(简写)
* background:red url("1.png") no-repeat bottom fixed;
- 顺序没有要求
- 没有url("1.png")，就没有平铺、定位、是否滚动
- url("1.png")是必写项
12.背景属性demo <--返回目录
demo1: input文本框中设置搜索图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input{ width: 280px; height: 30px; background: url("search.jpg") no-repeat right ; } </style> </head> <body> <input type="text" value="请输入关键字"> </body> </html>
demo2: 无序列表前面图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li{ /*清除列表项符号*/ 【list-style: none;】 background: url("li.gif") no-repeat left center; text-indent:1em; /*前面空一格*/ } </style> </head> <body> <ul> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> <li><a href="#">大明星:姜潮魔性拜年道晚安</a></li> </ul> </body> </html>
13.行高line-height <--返回目录
行高line-height:16px;
* 浏览器默认文字大小：16px
* 行高：是基线与基线之间的距离
* 行高=文字高度+上下边距
* 一行文字行高和父元素高度一致的时候，垂直居中显示。
行高的单位
* 行高单位 文字大小 值
20px 20px 20px
2em 20px 40px
150% 20px 30px
2 20px 40px
* 行高单位 父元素文字大小 子元素文字大小 行高
40px 20px 30px 40px
2em 20px 30px 40px
150% 20px 30px 30px
2 20px 30px 60px
总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。
行高以像素为单位，就是定义的行高值。
14.盒子模型--边框 <--返回目录
* 边框border
- border-top-style:solid; 边框的线型
** solid 实线
** dotted 点线
** dashed 虚线
** none 没有线
- border-top-color:red; 边框的颜色
- border-top-width:5px; 边框的宽度
* 边框属性的连写
- border-top:red solid 5px;
- 没有顺序要求，线型为必写项。
- 四个边框值相同的写法
* 边框合并
- border-collapse:collapse;
table{ width: 300px; height: 500px; border:1px solid red; border-collapse:collapse; /*将边框合并*/ } td{ border:1px solid red; } <table cellspacing="0"> <tr> <td></td> <td></td> <td></td> </tr> </table>
15.练习边框--表单控件案例 <--返回目录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .username{ border: 0 none; /*去掉边框*/ outline-style: none; /*去掉轮廓线(点击以后显示的是轮廓线)*/ background:#ccc; /*设置背景色*/ border:1px dashed green; /*设置边框*/ } .username:focus{ background:red; } .email{ border: 0 none; outline-style: none; border-bottom: 1px dotted red; } .search{ border: 0 none; border:1px solid #999; background: url("../04-案例/search.png") no-repeat right; } </style> </head> <body> <!-- 使用label后，点击用户名相当于点击了绑定的input文本框 --> <label for="username">用户名:</label> <input type="text" class="username" id="username"><br><br> 邮箱:<input type="text" class="email"><br><br> 搜索一下:<input type="text" class="search"> </body> </html>
16.盒子模型--内边距 <--返回目录
* padding-top:20px;
* padding连写
- padding: 20px; 上下左右内边距都是20px
- padding: 20px 30px; 上下20px 左右30px
- padding: 20px 30px 40px; 上内边距为20px 左右30px 下40
- padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
* 内边距撑大盒子的问题
<style type="text/css">
.box{
width:180px; /*div盒子宽度为180+160+160=500*/
height: 300px;
background: green;
padding-left:160px;
padding-right: 160px;
</style>
* 边框影响盒子的宽度
<style type="text/css">
.box{
width:180px;
height: 300px;
background: green;
padding-left:160px;
padding-right: 160px;
border: 10px solid red;
</style>
* 盒子的宽度=定义的宽度+边框宽度+左右内边距
* 继承的盒子一般不会被撑大
- 包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
17.案例：新浪导航 <--返回目录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .nav{ height: 40px; background: #eee; border-top:3px solid orange; border-bottom: 1px solid #aaa; } .nav-con{ width: 1000px; height: 40px; margin: 0 auto; /*上下0px，左右自动，使得div居中显示*/ } a{ font: 12px/40px 微软雅黑; /*line-height: 40px;*/ color: #333; display: inline-block; /*将a标签转成行内块元素*/ height: 40px; text-decoration: none; /*去除下划线*/ padding:0 12px; /*上下0px，左右12px*/ } a:hover{ background: #999; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> </div> </div> </body> </html>
18.盒子模型--外边距 <--返回目录
* margin-left|right|top|bottom
- 外边距连写
margin: 20px; 上下左右外边距20PX
margin: 20px 30px; 上下20px 左右30px
margin: 20px 30px 40px; 上20px 左右30px 下 40px
margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
* 垂直方向外边距合并
- 两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
* 嵌套的盒子外边距塌陷:直接给子盒子设置外边距时发生外边距塌陷
解决方法:
方法a 给父盒子设置边框(不推荐使用)
方法b 给父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
posted on 2019-12-29 11:31 wenbin_ouyang 阅读(249) 评论(0) 编辑 收藏 举报
