目录
基础:
字号:font-size:
设置粗体:font-weight:bold;
具中效果:text-align:center;
设置间距:padding:15px; 间距大小为15px
设置背景色:background-color:#FFFFCC;
设置边框:border:1px solid #FFFF00;
设置行间距:line-height:130%;
设置图文混排效果:
//对img标签设置图文混排效果
img{
float:left;
}
设置渐变效果:filter:alpha(opacity100,finishopacity=0,style=2);
精通:
设置字体:font-family:黑体,Arial,宋体,sans-serif;
表示浏览器首先寻找浏览者计算机中的“黑体”,如果没找到,则找“Arial”字体,如果都没有,则找“宋体”,如果都没有,则使用默认字体显示。
font-famil可以同时声明任意字体,字体间用逗号分隔开。
overflow:hidden;
属性作用:
1、设置标签内容不超过便签大小,超过部分会剪切掉。
2、清楚浮动。
3、可以通过overflow:hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来。
设置a标签样式
:link:修改从未被访问过状态下的样式
a:link{
color:tomato;
}
:visited:修改北方问过的状态下的样式
a:visited{
color:green;
}
:active:修改鼠标长安状态下的样式
a:active{
color:pink;
}
:hover:修改鼠标悬停在a标签上状态下的样式
a:hover{
color:orange;
}
文字大小:
px :代表像素,显示大小与显示器分辨率有关。
英寸:font-size:0.5in;
厘米:font-size:0.5cm;
毫米:font-size:4mm;
1point,印刷的点数:font-size:2pt;
pica,1pc=12pt:font-size:2pc
绝对大小的关键字:
font-size:x-small;
font-size:small;
font-size:medium;
font-size:large;
font-size:x-large;
font-size:xx-large;
文字颜色:通过color属性设置
设置文字颜色的方式:如蓝色
color:blue;
color:#00f;
color:#0000ff;
color:rgb(0,0,255);
color:rgb(0%,0%,100%);
文字粗细:通过font-weight属性设置
文字斜体:通过font-style属性设置
设置斜体:font-style:italic;
文字下划线、顶划线、删除线
下划线:text-decoration:underline;
顶划线:text-decoration:overline;
删除线:text-decoration:line-through;
下划线+顶划线:text-decoration:underline overline;
下划线+删除线:text-decoration:underline line-through;
顶划线+删除线:text-decoration:overline line-through;
三种同时:text-decoration:underlinie overline line-through;
英文字母:
单词首字母大写:text-transform:capitalize;
全部大写:text-transform:uppercase:
全部小写:text-transform:lowercase:
段落文字:
水平对齐方式:
左对齐:text-align:left;
右对齐:text-align:right;
居中对齐:text-align:center;
两端对齐:text-align:justify;
垂直对齐方式:
顶端对齐:vertical-align:top;
底端对齐:vertical-align:bottom;
中间对齐:vertical-align:middle;
行间距和字间距:
行间距:line-height:8pt;(绝对数值,行间距小于字体大小)
行间距:line-height:1.5em;(相对数值)
CSS注释:
/* 注释内容 */ :可以单行也可以是多行
<!--注释内容 -->: 避免老式浏览器不支持CSS、将CSS代码直接显示在浏览器上面而设置的HTML注释
CSS选择器:
标记选择器:通过不同的标签,设置统一标签的样式
如:设置所有h1标签的样式:文字颜色为红色,大小25px
<style>
h1{
color:red;
font-size:25px
}
</style>
类别选择器:为所有相同类别名的标签设置样式
例:为类别名为one的标签设置字体颜色为红色,字体大小19px
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--类选择器-->
<style type="text/css">
.one{
color:red;
font-size:19px;
}
</style>
</head>
<body>
<p class="one">class选择器</p>
</body>
</html>
标记选择器与类别选择器结合
例:
设置h3标签下的two样式:字体红色,字体大小25px
设置class属性为two的样式为,字体绿色。
因为在h3标签中设置过,h3.two的样式,所以two的样式不会应用到h3标签的two中。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--类选择器-->
<style type="text/css">
.one{
color:red;
font-size:19px;
}
h3.two{
color:red;
font-size:25px;
}
.two{
color:green;
}
</style>
</head>
<body>
<p class="one">class选择器</p>
<h3 class="two" > 标记选择器.calss</h3>
<p class="two">class选择器</p>
</body>
</html>
ID选择器:
例:设置id为one的p标签,字体为红色,字体大小为19px
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--ID 选择器-->
<style type="text/css">
#one{
color:red;
font-size:19px;
}
</style>
</head>
<body>
<p id="one">ID 选择器</p>
</body>
</html>
选择器声明
当某些选择器的风格是完全相同的,或者部分相同,可以将风格相同的CSS选择器同时声明
例:设置5个h标签和一个p标签的风格一致
设置h2.special、.special 、id为“one”的标签风格一致
因为he.special标签在第一次中设置过,所以第二次并不会影响前一个集体声明
<!--集体声明-->
<style type="text/css">
h1,h2,h3,h4,h5,p{
color:purple;
font-size:20px;
}
h2.special,.special,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明1</h1>
<h2 class="specal">集体声明2</h2>
<h3>集体声明3</h3>
<h4>集体声明4</h4>
<h5>集体声明5</h5>
<h1>集体声明</h1>
<p class="special">集体</p>
<p id="one">声明</p>
</body>
</html>
选择器嵌套:
例:设置在p标签中嵌套的b标签的样式,在p标签之外的b标签的样式不受影响。
也可以对类别选择器和ID选择器进行嵌套。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--集体声明-->
<style type="text/css">
p b{
color:maroon;
text-decoration:underline;
}
</style>
</head>
<body>
<p> 嵌套使用 <b>标记</b> 方法</p>
对方的<b>嵌套之外的方法</b>
</body>
</html>
CSS继承
例:设置class为“li1”的样式字体为红色;设置class为“li2”的样式字体为蓝色
整体样式为继承关系
对li1中的ol标签的子标签li,设置字体加粗添加下划线
利用继承设置样式。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--集体声明-->
<style type="text/css">
.li1{
color:red;
}
.li1 ol li{
font-weight:bold;
text-decoration:underline;
}
.li2{
color:blue;
}
</style>
</head>
<body>
<ul>
<li class="li1" >
<ul>
<li>页面父子关系复杂1</li>
<li>页面父子关系复杂2</li>
<li>页面父子关系复杂3</li>
</ul>
<ol>
<li>页面父子关系复杂1</li>
<li>页面父子关系复杂2</li>
<li>页面父子关系复杂3</li>
</ol>
</li>
<li class="li2" >
<ul>
<li>页面父子关系复杂1</li>
<li>页面父子关系复杂2</li>
<li>页面父子关系复杂3</li>
</ul>
<ol>
<li>页面父子关系复杂1</li>
<li>页面父子关系复杂2</li>
<li>页面父子关系复杂3</li>
</ol>
</li>
</ul>
</body>
</html>