自学css 15.认识css 16.容器的作用 17.布局与选择器 18.css的重叠 19.选择器的权重

15.认识css

用来修饰网页样式的语法叫层得样式表 简称css

style 译为风格、样式 可更改颜色、高、宽、
background 译为背景
background-color 译为背景颜色 color译为颜色

16.容器的作用

font-size 字体大小 font表示字体 size表示尺寸 例： font-size:24px;

<div>   </div>
一个通用的容器标签，不具备任何特殊功能，仅当作容器来使用。可以包裹任何内容，也可以
容器直接互相包裹。
<span>    </span>
一个容器标签，不具备任何特殊功能，仅当做容器来使用。
用于包裹一段文本，便于给文本增加样式
例；<span style="background-color: #666666; color: red;">艾英健</span>
文本后边背景颜色为灰色，字体为红色
<div style="margin: auto;">   </div>
容器也就是元素本身水平居中   margin译为边距， auto译为自动

总结
text-align：center; 内部元素水平居中
margin-auto; 元素本身水平居中
background-color：red; 设定背景颜色
color：red; 设定文字颜色
font-size：24px; 设定字体大小

17。布局与选择器

banner 横幅 navigation 导航 bottom 底部
div容器特点： 一个空的div，默认宽度为100%，高度为0，添加内容后，才会被撑开

line-height：40px 行高为40px
设置行高与容器高度一致，使文字在容器中间。
例：style=“height: 80px; line-height: 80px;”

margin:0 15px 外边距上下为0，左右为15px

在head标签里添加 style元素简化行内样式为内部样式

<style>
html {
				background-color: #666;
			}
.nva {
				text-decoration:none; background-color:yellow; margin: 0 15px;
			}
</style>

<div id="banner">
			<img src="1.png" style="width: 100%;">
改为内部样式时，为确保该图片准确，应改为 

<style>
#banner img {
				width: 100%;
			}
</style>
只针对banner下的img生效

“text-decoration: none;” 是css样式，表示的是文本没有下划线，一般用来去除a标签默认样式的下划线。
text 译为文本
decoration 译为装饰
none 译为没有
通过选择器将样式与标签对应起来
class 类别 类别可以随便加，用来精确该类别
class=“nav” 表示nav类别，nav是类别名字，随便起。将行内样式改为类别简化
. 针对类别 #针对id名

总结： css选择器：
id选择器 #box id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素
类别选择器 .nav 选择拥有该类别的多个元素
标签选择器 div 根据标签名称，选择对应的所有标签
通用选择器 * 针对页面上所有的标签生效
选择器的范围从小到大。

18.样式表的层叠

<a>给文字加边框</a>
文字外增加边框
border：solid 1px blue；  蓝色实体边框1px粗细
border-right：solid 1px blue 蓝色右实体边框1px粗细
border：none 取消边框 在最后一个a标签里加style里写上 用来取消例子里的最后一个边框。如图所示。
border：dotted 虚线边框  点组成的虚线
border：dashed 虚线边框 ----一个个破折号组成的虚线
border：solid 实体边框

padding：0 15px； 设置文字的内边距

例：

对应网页：

行内样式优先级>内部样式优先级
最后

把行内样式里的 
<a href="#" class="item" style="boder:none;">秒杀活动</a>
改为
 <a href="#" class="item last">秒杀活动</a>
 head里的内部样式增加 
 <style>
 #navigation .last {
				border:none
				}
</style>	
用来去掉最后一个的右边框			

选择器的权重

css优先级
行内样式>id选择器>类选择器>标签选择器>通用选择器
行内样式：…style="…"
id选择器：#box {…}
类选择器：.con {…}
标签（元素）选择器：div {…}
通用选择器：* {…}

当样式发生冲突时，谁的权重值高谁就生效
选择器选择的范围越小越精确 优先级就越高

权重值的计算：