首页 > 代码库 > 前端基础——CSS

前端基础——CSS

一  CSS的四中引入方式

1.行内式

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

2.嵌入式

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

3.链接式

将一个CSS文件引入HTML。

<link href="http://www.mamicode.com/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.文本属性

 

 color 设置文本的颜色。 1
direction 规定文本的方向 / 书写方向。 2
letter-spacing 设置字符间距。 1
line-height 设置行高。 1
text-align 规定文本的水平对齐方式。 1
text-decoration 规定添加到文本的装饰效果。 1
text-indent 规定文本块首行的缩进。 1
text-shadow 规定添加到文本的阴影效果。 2
text-transform 控制文本的大小写。 1
unicode-bidi 设置文本方向。 2
white-space 规定如何处理元素中的空白。 1
word-spacing 设置单词间距。 1
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

5.边框属性

 

 border 在一个声明中设置所有的边框属性。 1
border-bottom 在一个声明中设置所有的下边框属性。 1
border-bottom-color 设置下边框的颜色。 2
border-bottom-style 设置下边框的样式。 2
border-bottom-width 设置下边框的宽度。 1
border-color 设置四条边框的颜色。 1
border-left 在一个声明中设置所有的左边框属性。 1
border-left-color 设置左边框的颜色。 2
border-left-style 设置左边框的样式。 2
border-left-width 设置左边框的宽度。 1
border-right 在一个声明中设置所有的右边框属性。 1
border-right-color 设置右边框的颜色。 2
border-right-style 设置右边框的样式。 2
border-right-width 设置右边框的宽度。 1
border-style 设置四条边框的样式。 1
border-top 在一个声明中设置所有的上边框属性。 1
border-top-color 设置上边框的颜色。 2
border-top-style 设置上边框的样式。 2
border-top-width 设置上边框的宽度。 1
border-width 设置四条边框的宽度。 1
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2
border-bottom-left-radius 定义边框左下角的形状。 3
border-bottom-right-radius 定义边框右下角的形状。 3
border-image 简写属性,设置所有 border-image-* 属性。 3
border-image-outset 规定边框图像区域超出边框的量。 3
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 3
border-image-slice 规定图像边框的向内偏移。 3
border-image-source 规定用作边框的图片。 3
border-image-width 规定图片边框的宽度。 3
border-radius 简写属性,设置所有四个 border-*-radius 属性。 3
border-top-left-radius 定义边框左上角的形状。 3
border-top-right-radius 定义边框右下角的形状。 3
box-decoration-break   3
box-shadow 向方框添加一个或多个阴影。 3

6.列表属性

 

 list-style 在一个声明中设置所有的列表属性。 1
list-style-image 将图象设置为列表项标记。 1
list-style-position 设置列表项标记的放置位置。 1
list-style-type 设置列表项标记的类型。 1
marker-offset   2

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

 

前端基础——CSS