css基础
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位。
**一，在html中使用css的方法【CSS引用方式】 **
- 行内样式
行内样式表的应用方法：在html标记内，每个标签都使用style属性定义css样式。
注：在标签内部设置（style）样式，键值对用冒号隔开，例如：
<p style=”color:red;font-size:36px”></p>
特点：专人专用，不能共享【就近原则】
缺点：结构和表现没有做分离，页面的代码比较多，维护和管理麻烦 - 内嵌样式 （内部样式） 在title下面写
<style></style>
内嵌样式表的应用方法：将css添加到<head>与</head>之间，
并用<style></style>标记声明的一种样式。
语法如下：
<style>
/这里写css内容/
</style>
注：【所有的h1/p等标签都遵循样式规则 标签选择器：选中多个有的h1标签】
<style type="text/css">
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/
}
</style>
内部样式： 作用域小的优先级高，越具体的优先级越高 所以当内联和内部样式都有的时候，内联样式优先级高（专人专用，内部
很多名字相同的都可以用）
特点：
1）内部样式写在<head></head>标签内，必须放在一个<style type="text/css"></style>标签内
2）在一个页面中结构和样式做了分离
3）内部样式可以给这份html文档的元素使用，不能对外共享 - 链接样式 （外部样式） 在title下写link
外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容，不可以有标签之类的。
样式内容：
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/
}
链接样式表的应用方法：在外部定义css样式表，通过<link/>链接标记链接到页面中的一种样式。
（Href路径 rel样式 type类型）
语法：<link href="style.css" rel="stylesheet" type="text/css" />
特点：
一个外部样式可以给任意的html文档使用，一对多的关系，完全的分离
中大型网站使用频率高
- 导入样式 @import
导入样式的应用方法：采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。
语法：
<head>
<style type=”text/css”>
@import “1.css”
</style>
</head>
特点：同外部样式一样
优先级：越具体优先级越高 实际要看先后顺序
注意：行内样式>内嵌样式>链接样式
最好使用1-2种，避免“撞车”
二，Css选择器
介绍：
css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}
1.全局选择器
1）.全局选择器 通配符 通用 权重 0
全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{ }
例如：
*{ color:red;}
特点：结构和样式分离：分工明确，操作简单
2）.组合选择器：
特性： 每一个选择器位均可以为任意合法选择器或选择器组合，一次性控制多个选择器，
选择器之间以“，” 隔开
例如：
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
3）.后代与子代选择器：
特性：
- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系
①.后代选择器
<style id="my">
/*查找p元素的后代span元素 空格就是后代*/
p span{
color: green;
}
i span{
color: red;
}
.pcolor #my{
color: lightskyblue;
font-size: 50px;
}
</style>
<p id="my" class="pcolor">段落1</p>
<p class="pcolor"><span id="my">后代元素</span></p>
<p>段落2</p>
<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>
②.子代选择器
语法：
选择器1>选择器2>…{
//样式规则
}
<style type="text/css">
p>i{
color: red;
}
</style>
<p>lalal</p>
<p>不<i>爱你</i></p>
4）.嵌套选择器：
可适用于选择器内部的选择器的样式。
语法：
选择器1 选择器2{….}
P b{
Color:bule;
}
例如：<p>嵌套使<b>用<b>CSS</b>``</b>标记的方法</p>
嵌套之外的<b>标记</b>不生效
效果：
嵌套使用CSS标记的方法
嵌套之外的 标记不生效2.标签选择器 元素选择器 权重 1
标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
Selector{
{ property:value1;
property:value1;
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明
样式规则:p{ }直接给标签设置样式的就是标签选择器
3. 类选择器 样式名选择器 权重 10
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器 。
类选择器的语法: 类名{样式规则}
.pcolor{
color: chartreuse;
}
特点：一个元素可以使用多个类选择器，不同的规则可叠加，可穿两个样式，相同的功能看优先级：p.color范围比.color范围小，所以冲突使用p.color。比较灵活。
- ID选择器 权重 100
行内样式 权重 1000
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{ }
例如：
#con{ color:red;}
给h1标记添加id选择器con。
<h1 id="con">我是标题红色</h1> - 伪类选择器
a:link（未被访问过,访问之前的状态）
a:visited(访问过后)
a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active（鼠标按下）
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
选择器总结：
优先级：id>class>标签>全局
权重值：
Style 1000
Id 100
Class 10
标签（p）1
全局（*）0
(标签选择器的一种)派生选择器(包含选择器)：html div {} p a{}
三，css属性
1.文字属性
颜色：color: red;
字号：font-size: 14px; /*通常12px为正文，14px为标题*/
字体：font-family: "微软雅黑";
font-weight: bold; /*文字加粗*/
/*normal为普通字体100--500，bold,bolder,600--900为加粗
2.段落属性
text-decoration: underline; /*下划线,overline上划线,line-through删除线,none无修饰*/
text-align: left; /*水平对齐方式*/
text-indent: 4; /*文本缩进 单位em 可数值可百分比*/
line-height: 20px; /*文本行高*/
text-shadow: 10px -10px 5px cornflowerblue;/*文本阴影*/
letter-spacing: 29px;/*字母之间的间距*/
3.方边框属性
border-style: dashed;/*边框虚线 实心 solid */
border-width: 2px; /*边框线宽度*/
border-color: blue; /*边框颜色*/
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式*/
4.圆边框属性
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px; /*边框圆角半径 50 就是园了*/
box-shadow: 10px 10px 2px red; /*盒子的阴影*/
box-shadow: 10px 10px 10px #000000;/*颜色及偏移量 第一个数值为左右偏移正右*/
/* 负左，第二个值为上下*/
/*偏移，正下负上，第三个值为高度偏移，正高负低*/
5.图片属性（有边框）
Border:2px solid red;
border-left:2px dashed green;
Height:100px;
border-bottom:2px solid red ;
Width:150px;
6.背景属性
height: 100px;
width: 150px;
/*background-color: #aaa; */ /*背景颜色*/
background-image:url(../img/logo.jpg); /*背景图片*/
background-repeat: repeat; /*背景重复 属性值：repeat/no-repeat/repeat-x/repeat-y*/
background-position: center;
拓展：
/*怎么使背景图片居中？
Background-position:center;
Background-position:50% 50%;
Background-position:50% center;
Background-position:center 50%;
可以取的值为关键字，数值，百分比
水平：left center right（或者数值）
垂直：top center bottom（或者数值）*/
background-attachment:fixed; /*背景附件 背景是否滚动 属性值：scroll*/
/*（默认）滚动 fixed 固定）*/
/*谷歌浏览器开启：chrome://flags/#overlayscrplbars
/* <chrome://flags/> Scollbars->Rnable*/
7.列表属性
list-style-type:disc;
/*Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。*/
/*list-style-image */
/* 定义列表项标志的图像(设置了图片上面的不好用了最好上个属性设置成none)*/
/*语法格式如下：list-style-image:none|url(url)*/
list-style-position:initial; /*列表位置*/
/*语法格式如下：list-style-position:outside（默认）|inside（）在列
/* 表li的里面还是外面*/
/*去掉列表案例符号的代码是: ul{list-style:none;}*/
/*list-style-type: decimal; 使序列表统一列表项符号*/
```<style type="text/css">
ul{
border: 1px solid red;
}
ul li{
border: 1px dashed black;
/*list-style-type: decimal; 数字 变成了有序列表
list-style-image: url(../img/logo1.jpg);
list-style-position: outside; 设置在li的里面还是外面*/
list-style: url(../img/logo1.jpg) inside;
}
</style>
<ul>
<li>列表</li>
<li>列表2</li>
<li>列表3</li>
</ul>
8. 案例实现
（1） 用div实现布局，从上到下分成5个，分别命名成logo,nav,banner,main,footer
（2） 导航用<a href=”#”>首页实现</a>
（3） 主体用标题标签和段落标签实现
（4） 页脚用段落标签实现
（5） 用CSS对页面进行修饰
**四，盒模型**
（包括 border+padding+margin+width（height））
**1. 边框属性**
边框颜色Border-color如：border-color:red;
边框样式border-style,常用边框样式：solid 实线、dashed 虚线、dotted 点线、none 取消线
边框宽度border-width如border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色， 如：border: #666 solid 1px;
单独设置一条边框如：上边框border-top，右边框border-right，下边框border-bottom，左边框border-left
如:border-bottom:1px #ff0000 dashed;
注意：
四边边框和上下左右某一边的边框都使用复合属性设置：如border-top：1px solid #ccc，而border-top-style，border-top-width ， border-top-color等单独设置某一边样式、宽度、颜色等不要求掌握
**2. 内填充**
padding：内容与边框之间的距离。
(padding-left/top/right/bottom 加长度)如：padding-left：200px;
**3. 外边距**
margin：元素与元素之间的距离。
（用法同上） 另外属性值只要求掌握数值加单位和auto，百分率和负值不要求掌握
在网页中插入网页主体div，并设置不同类名，书写css设置宽高背景，搭建布局色块，并利用margin：0 auto设置居中效果。
**4. 复合属性**
padding复合属性所有内填充属性（margin外边距 同理）
一个数值表示上下左右，两个数值代表 第一个数值上下 第二个左右，
三个数值表示第一个数值上 第二个数值左右 第三个数值下，
四个数值为上下左右依次。
**5. 对元素宽高的影响**
padding对元素宽高的影响
素设置宽高后，再设置padding将会影响盒子的实际大小。
盒子的实际宽=width+padding-left+padding-right+border
盒子的实际高=height+padding-top+padding-bottom+border
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
