前端基础——CSS

一  CSS的四中引入方式

1.行内式

<p style="background-color: rebeccapurple">Hello World</p>

2.嵌入式

把CSS样式集中写在head标签对中的style标签对中。

3.链接式

将一个CSS文件引入HTML。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
 

4.导入式

导入式会在整个网页加载完成 后再加载CSS样式，有缺陷。

<style type="text/css">

          @import"mystyle.css"; 此处要注意.css文件的路径

</style>

二  Selector样式选择器

1.基础选择器

*{}　　匹配任何元素。

p{}  div{}  a{}　　通过标签类型匹配。

.c1　　　　class选择器。

#d1　　　　id选择器，p#d2表示匹配p标签中id等于d2的元素。

2.组合选择器

（1）多元素选择器(,)

div,p{}

（2）后代选择器（空格）

匹配所有属于E元素后代的F元素,包括F元素的后代.如：div a{}

（3）子代选择器（>）

匹配所有E元素的子元素F，不包括F元素的后代。如：div>p{}

（4）毗邻选择器（+）

匹配所有紧随E元素之后的同级元素F，即E元素后的下一个元素。如：div+p{}

3.属性选择器

 E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}

 p:before        在每个 <p> 元素的内容之前插入内容                    p:before{content:"hello";color:red}

 p:after         在每个 <p> 元素的内容之前插入内容                    p:after{ content:"hello"；color:red}

4.伪类（Pseudo Classes）

添加特殊效果

anchor伪类：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

before after伪类：

:before    p:before    在每个<p>元素之前插入内容
:after    p:after        在每个<p>元素之后插入内容
例如：在p元素后插入‘welcome‘。
 p:after{
            content: ‘welcome!‘;
        }

三  CSS常用属性

1.颜色属性

有四种表示方式：

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>

2.字体属性

• font-size　　    字体大小
• font-family         字体集，如：微软雅黑、Times New Roman等，可以设置多个值，浏览器首先查找第一个值是否支持，不支持则找下一个。
• font-weight　　 字体粗细
• font-style           字体样式，倾斜..

3.背景属性

• background-color:red
• background-image:url(‘1.jpg‘)
• background-repeat:no-repeat;(repeat:平铺满)　　是否重复背景图像
• background-position：right top（20px 20px）;(横向：left center right)(纵向：top center bottom)　　背景图像的开始位置

简写：background: #00FF00 url(bgimage.gif) no-repeat fixed top

4.文本属性

5.边框属性

6.列表属性

7.display属性

• none
• block
• inline
• inline-block

8.外边距和内边距

• margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding:           用于控制内容与边框之间的距离；   
• Border(边框)     围绕在内边距和内容外的边框。
• Content(内容)   盒子的内容，显示文本和图像。

9.float

10.position

（1） static，默认值 static：无特殊定位，对象遵循正常文档流。

（2） position: relative／absolute

（3）position:fixed