一:CSS简介
CSS:Cascading Style Sheets 层叠样式表
CSS负责描述HTML页面的样式;从审美的角度描述页面的样式
1,CSS语法:
selector {
property: value;
property: value;
}
2,CSS创建:
<!-- 1,外部(外联)样式表;最常用的方式 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<!--2,内部(内嵌)样式表 -->
<style type="text/css">
p {color:red;}
</style>
<!-- 3,行内(内联)样式;不推荐使用,尽量别用 -->
<p style="color:red,font-size:20px">我用了行内样式,呵呵</p>
<!-- 4,使用@import加载外部样式表 -->
<!-- 注:@import指令出现在样式表中的其他规则之前 -->
<style type="text/css">
@import url("mystyle.css");
p {color:red;}
</style>
<!-- 在外部样式表中导入其他样式表,这些代码写在CSS文件内 -->
@import url("mystyle1.css")
@import url("mystyle2.css")
body {
color:red;
}
3,CSS特性:
3.1,层叠性
样式可以层叠,即多重样式将按某种规则层叠为一个;样式的覆盖与样式的调用顺序无关,与样式的定义顺序有关
3.2,继承性
前提:标签之间属于一种嵌套关系
与文字有关的属性大都可以实现继承,除了<a>、<h1>-<h6>,这几个标签是例外
3.3,优先级
层叠规则,优先级高的样式可以覆盖优先级低的样式。
行内(内联)样式 > 内部样式 > 外部样式 > 默认样式(浏览器缺省设置)
默认样式 < 标签选择器< 类选择器 < id选择器< 行内(内联)样式 < !important
0 1 10 100 1000 1000以上
上面用数字来表示优先级(权重),只是一个类比,10个标签选择器的优先级还是不如1个id选择器的,其他类推
继承来的样式的权重为0;权重可以叠加,即10个标签选择器的权重为10
二:CSS选择器
1,标签选择器(元素选择器)
语法:标签名 {属性: 值;}
body {margin:0;}
p {color:red;}
2,通配选择器
/* 通配选择器使用通配符*来匹配所有标签 */
* {
padding: 0;
margin: 0;
}
3,类选择器
在css文件或<style>标签内定义:.类名 {属性:值;} ; 在开始标签内以属性的方式调用:class="类名"
类的命名规范:不能以数字开头定义类名;不能以特殊符号开头,下划线_除外;不推荐使用汉字、标签名和属性名定义类名。
<style type="text/css">
.c1 {
color: red;
}
.c2 {
text-decoration: underline;
}
</style>
<body>
<p class="c1">我是一条咸鱼</p>
<p class="c1 c2">我也是一条咸鱼</p>
</body>
4,ID选择器
在css文件或<style>标签内定义:#id名 {属性:值;} ; 在开始标签内以属性的方式调用:id="id名"
注意:id名唯一性,即一个id名在整个文档内只使用一次;一个标签只能调用一个id选择器;id主要用来和JS配合使用
#d1 {
color: red;
}
#d2 {
text-decoration: underline;
}
<p id="d1">我是一条咸鱼</p>
<!-- 一个标签只能调用一个id选择器,所以下面的用法是错误的 -->
<p id="d1 d2">我也是一条咸鱼</p>
5,复合选择器
<style type="text/css">
/* 1,标签指定式选择器 */
p.c1 {
color: red;
}
p#d1 {
color: blue;
text-decoration: underline;
}
/* 2,选择器分组/声明分组,以逗号分隔,同时为多个选择器定义样式 */
h3,p.c2,p#d2 {
color: deeppink;
}
/* 3,后代选择器:选择上所有的某种后代,如选择所有是h3的后代 */
.div1 h3 {
font-style: italic;
font-size: 50px;
}
/* 4,子元素选择器:只选择到下一级相应的元素,无法选择上下下一级及更下面的相应元素 */
div>h3 {
color: red;
}
/* 5,相邻兄弟选择器:只选择上同一级紧跟在后面的一个相应元素,之间不能有其他的元素 */
div+h3 {
color: red;
}
/* 6,兄弟选择器:选择上同一级后面的所有相应元素 */
div~h3 {
color: red;
}
</style>
<body>
<p>我是一条咸鱼</p>
<p>我也是一条咸鱼</p>
<h3>hehehhe</h3>
<div class="div1">
<h3>自我介绍</h3>
<p class="c1">我是一条咸鱼</p>
<p id="d1">我是一条咸鱼</p>
<ul>
<li>
<h3>我躲在这里</h3>
</li>
</ul>
<h3>自我介绍结束</h3>
</div>
<p>我来隔开你们</p>
<h3>hehehhe</h3>
<h3>hehehhe</h3>
<div class="div2">
<h3>自我介绍</h3>
<p class="c2">我是一条咸鱼</p>
<p id="d2">我是一条咸鱼</p>
<h3>自我介绍结束</h3>
</div>
<h3>hehehhe</h3>
<h3>hehehhe</h3>
</body>
6,属性选择器
1,简单属性选择器
img[alt] {}
*[title] {}
a[href][title] {}
2,具体属性值选择(完全匹配)
a[title="baidu"] {}
p[class="car"][id="ben"] {}
p[class="urgent warning"] {}
3,部分属性值选择;属性值含有该部分就能匹配上
p[class~="figure"] {}
4,子串匹配属性选择器
[foo^="bar"] --选择foo属性值以"bar"开头的所有元素
[foo$="bar"] --选择foo属性值以"bar"结尾的所有元素
[foo*="bar"] --选择foo属性值包含"bar"的所有元素
[foo|="bar"] --选择foo属性值等于"bar"的或以"bar"开头的所有元素
7,伪类选择器
<style type="text/css">
a:link {
color: gray;
text-decoration: none;
}
a:visited {
color: blue;
}
/* a:focus {
text-decoration: overline;
} */
/* :focus,:hover,:active IE6只允许超链接使用,IE7允许应用于所有元素 */
a:hover {
text-decoration: underline;
color: red;
}
a:active {
color: yellowgreen;
}
input:focus {
background-color: green;
}
/* 取得第一个p元素,IE7开始支持 */
p:first-child {
color: deeppink;
}
</style>
8,伪元素选择器
p:first-letter {
color: red;
}
p:first-line {
text-decoration: underline;
}
P:before {
color: green;
}
p:after {
color: blue;
}
三:层叠
特殊性:使用0,0,0,0表示法表示特殊性,左边为高位,可以叠加,但不能进位,数字越大则特殊性越高。
* 通配选择器 | 0,0,0,0 |
标签/伪元素选择器 | 0,0,0,1 |
类/伪类/属性选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
内联(行内)样式 | 1,0,0,0 |
继承的样式 | 无特殊性 |
继承值无特殊性,即0特殊性的通配选择器都比继承值强
重要声明:p {color: #333 !improtant;} 其特殊性最高!
样式层叠规则分析:
四:文本样式
1,字体
写在前面:文档显示的字体取决于用户机器上安装了的字体系列;如果用户机器上安装的字体与你设计使用的字体不同,那么文档看上去会大不同!
5种通用字体系列:
Serif 字体:字体成比例且有上下短线;包括 Times、Georgia、New Century Schoolbook
Sans-serif 字体:成比例但没有上下短线;包括 Helvetica、Geneva、Verdana、Arical
Monospace 字体:不成比例,每个字符的宽度都完全相同;包括 Courier、Courier New、Andale Mono
Cursive 字体:模仿人的手写体;包括 Zapf chancery、Author、Comic Saus
Fantasy 字体:Western、Woodblock、Klingon
推荐写法:
/* 按字体的优先级排序;字体名中有空格或#/$之类符号需加引号 */
/* 通过结合特定字体名和通用字体系列,可以创建与你预想的基本相同的文档 */
p {
font-family: Times,TimesNR,'New York',serif;
}
/* 设置字体的粗细使用font-weight */
/* font-weight:normal(400)|bold(700)|bolder|lighter|100-900 */
font 联写: font:style weight size/line-height family;
联写时,size和family必须有且顺序不能变,即size要在family前面
注:在使用简写属性font时,所有被忽略的值都会重置为其默认值!
2,字体颜色:
方式一:使用命名颜色,如 red,green,blue
方式二:rgb(0,0,0) rgb(255,255,255) rgba(0,0,0,0.7) a为alpha 透明度
方式三:rgb(100%,100%,100%)
方式四:使用十六进制数 #RRGGBB,如#FFFFFF,可简写为#FFF
web安全颜色:RGB值20% 和 51 的倍数,0% 和 0也是安全值;十六进制中,使用值00、33、66、99、CC、FF的三元组
3,文本属性
基线:是英文字母"x"的下端沿
内容区:底线和顶线之间的区域
行高 line-height:是文本行基线之间的距离 (能继承)
line-height - font-size = 行间距
text-indent 文本缩进 应用于块级元素
text-align: left | center | right | justify
vertical-align: sub | super | top | middle | bottom
应用于行内元素和表单元格、替换元素 (不能继承)
text-transform: uppercase | lowercase | capitalize | none
text-decoration: none | underline | overline | line-through | blink (无继承性)
五:背景
前景色:color ①影响边框 ②影响表单元素
背景:内容框和内边距是元素背景的一部分,且边框画在背景之上。
background-color: 背景颜色
background-image: url(); 背景图像
background-repeat: repeat (平铺,默认) | repeat-x | repeat-y | no-repeat
background-position: left | right | top | bottom | center | 百分数 | 长度值
决定原背景图像的放置位置
其相对于元素的内边框边界放置原图像
background-position:top; 只写一个关键字,则认为等同于 background-position:top center;
background-attachment: scroll (滚动,默认) | fixed (固定)
背景图像关联,相对于视窗
background 联写:
background: white url() top left repeat-x fixed; 无顺序要求
注:在使用简写background属性时,所有被忽略的值都会重置为其默认值,从而覆盖先前给定的值!