CSS
一、CSS引入方式
二、CSS属性操作
CSS
层叠样式表
CSS引入方式
1.行内式
与html合并在一起的的方式
<p style="color:red ; background:yellow">hello</p>
2.嵌入式
<head>
<style>
p{
color:red
}
</style>
</head>
3.链接式
将CSS代码写入文件Stylesheet，导入文件使用
#a.css文件：
p{
color:red
}
#html文件：
<head>
<link rel="stylesheet" href="a.css"/>
</head>
4.导入式
导入顺序：先加载后链接，导致样式延迟显示
#a.css文件：
p{
color:red
}
#html文件：
<head>
<style>
@import "a.css";
</style>
</head>
css选择器
查找标签
1.基本选择器
标签选择器
[标签]{
}
id选择器
#[id值]{
}
class选择器
.[class值]{
}
统配选择器
*{
margin:0
}
2.组合选择器
一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。
<style>
.outer p{ /* 后代选择 */
}
.p1,.div2{ /* 多元素选择 */
}
.outer>p{ /* 子代选择 */
}
.outer+p{ /* 毗邻选择，向下紧挨的p被选择 */
}
.outer～p{ /* 兄弟选择 */
}
</style>
<div class="outer">
<div class="div1">
<p>p</p>
</div>
<p>pp</p>
</div>
<p class="p1">ppp</p>
<div class="div2">div</div>
3.属性选择器
自定义键值对，作为属性
<style>
[po]{
}
[po="p2"]{
}
div[po="p2"]{ /*注意不要加空格*/
}
.c1[po="p2"]{
}
</style>
<div po="p1" class="c1">p1</div>
<div po="p2" class="c1">p2</div>
4.伪类
anchor伪类：专用于控制链接的显示效果
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类控制只可以控制标签的后代标签。
5.选择器的优先级
- 子标签继承父标签的样式
- 同一种选择器，按顺序靠后的样式显示
- 不同的选择器：sytle(行内式) [1000]> #(id)[100] > .(class)[10] > 标签[1]
- 组合使用不同的选择器：通过优先级数字加和确定优先级
- !imprtant优先级高于一切
css属性操作
操作标签
CSS文本操作
1.文本颜色
<style>
p{
/*设置文字颜色*/
color: red; /* 颜色的名字 */
color: RGB(0,255,0); /* RGB值 */
color: #ffffff; /* 十六进制值 */
/*设置文字透明度*/
color: #RGBA(255,0,0,0.3); /* 0.3透明度 */
opacity: 0.3; ／* 单独调节透明度 *／
}
</style>
<p>hello</p>
2.水平对齐方式
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
<style>
div{
text-align: center; /* 文本水平居中对齐 */
text-align: jusetify; /* 文本左右对齐 */
}
</style>
<div>hello</div>
3.其他属性
font-size: 10px;
line-height: 200px; 文本行高，文本显示在上下居中位置
text-decoration: none; 设置或删除文本的装饰，主要是用来删除链接的下划线
font-family: 'Lucida Bright' 字体
font-weight: lighter/bold/border
frot-style: oblique
text-indent: 150px 首行缩进150px
letter-spacing: 10px 字母间距
word-spacing: 20px 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
3.背景属性background
- background-color
- background-image
- background-repeat
- background-position
<style>
div{
background-color: red;
background-image: url("abc.jpg");
background-repeat: repeat;
background-repeat: no-repeat;
background-position: center center; /* 位置水平高低居中 */
background-position: right top（20px 20px）;
background: url("abc.jpg") no-repeat center center; ／*任意顺序都可以识别*／
}
</style>
<div>hello</div>
4.边框border
- border-width
- border-style (required)
- border-color
<style>
div{
width: 400px;
height: 200px;
border-width: 5px;
border-style: dashed;
border-color: red;
border-right: none;
/*简写*/
border: 3px soild red;
}
</style>
<div>hello</div>
5.列表
ul>li.item*3 :速写
<style>
div{
list-style-type: no;
list-style-type: image;
list-style-position: center;
/*简写*/
list-style: none;
}
</style>
<ul>
<li class="item">12</li>
<li class="item">23</li>
<li class="item">34</li>
</ul>
6.display
- none
- block
- inline
- inline-block
<style>
div{
display: none;
}
span{ /*内联转块级*/
display: block;
}
button{ /*块级转内联*/
display: inline;
}
div{ /*兼块级和内联*/
display: inline-block;
}
</style>
<div>hello</div>
<span>asdsd</span
<button></button>
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
7.margine和padding
盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
8.float
2、清除浮动(推荐)。
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
8.position
relative
参照物是元素之前文档流中的位置
元素不脱离文档流
1.relative 相对定位。
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
2.absolute 绝对定位。
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
3.fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
