首页 > 代码库 > 前端基础——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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。