CSS总结
什么是CSS
- css是层叠样式表，可以对网页进行修饰和渲染的一门技术。
如何在网页中使用CSS
- 1.直接使用（不推荐）原因：标签中的属性很多，会造成页面混乱，并且不能被复用。
通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>`
<div style="border:2px solid red;font-size:26px; background:pink;">这是一个div...</div>
`
- 2.在< head>中通过< style>标签引入CSS
实现了代码的分离和复用，初步实现了代码的分离。
<head>
<style type="text/css">
span{
border:2px solid blue;
font-size:22px;
background:red;
}
</style>
</head>- 3.使用link连接引用外部CSS文件
在html中引入css文件
<link ref="stylesheet" href="CSS文件路径">xx.css文件
@charset "utf-8";
span{
border:2px solid blue;
font-size:22px;
background:red;
}CSS选择器
- 1.通过元素名（标签名）选择指定名称所有被选中的标签
span{}
div{}- 2.class选择器
每个标签都可以设置一个class属性值，通过选择class的值选择。
.s1{}
.s2{}*如果一个标签的class值由多个 < span class = "s1 s2">，s2的设置会覆盖s1的设置。
- 3.id选择器
也可以根据id的属性值选择标签。
#d1{}
#d2{}- 4.后代选择器
格式：祖先 后代{}
div p{ /* 匹配所有div中的p标签*/
}常用属性
文本属性
- 1.text-align:设置元素内的文本内容对齐方式。
- 2.text-decoration：设置文本的下划线方式。
- 3.text-indent：设置文本的缩进，单位：px/%。
- 4.letter-spacing：设置字符间距。
- 5.text-shadow:x（水平位移）x（垂直位移） x（阴影扩散值） x（颜色）;设置文本阴影。
字体属性
- 1.font-siez:字体大小。
- 2.font-weight:文字粗细。
- 3.font-family：字体的格式。
- 4.color:字体颜色
背景属性
background-color：背景颜色。background-img：设置背景图片，url=“”
*background-repeat：设置或检索背景图片的排列方式（repeat默认值,repeat-x横向重复，no-repeat没有重复）
background-position:设置或检索背景图片位置background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置
边框border
border-width:2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式border-color: red; -- 设置元素边框的颜色
margin: 设置元素的外边距
display属性
display属性用来设置元素的类型；常用的值：
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
//比如: div/p/h1~h6/form/table 等元素都是块级元素
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
//比如: span/input/img/i/b 等元素都是行内元素
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。