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：示意暗藏元素