CSS
代码显示
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>美女</title>
<link rel="stylesheet" href='hhh 1.css'>
</head>
<body background='1.jpg'>
<h1 class='red'>嘿嘿嘿</h1>
<h2 class='red'>我爱你,就像老鼠爱大米</h2>
<p class='red green'>你是我的小呀小苹果,怎么爱你都不嫌多。</p>
<p>abcdefg</p>
</body>
</html>
css部分
```body{
background-color:#000000;
font-size:large;
/*这是注释*/
}
p{
color:maroon;
background-color:gray;
text-decoration:underline;
font-size:150%;
}
h1,h2{
color:white;
font-family:STKaiti;
font-size:200%;
font-weight:normal;
}
h1{
border-bottom:1px solid gray;
font-size:220%;
font-style:oblique;
}
p.green{
color:green;
font-weight:bolder;
font-style:italic;
}
.red{
color:red;
}
补充内容
要为html添加css样式,需要在< head >里的< style >添加样式。
1.颜色
{background-color:#000000;}
设置背景颜色
{color:red;}
设置字体颜色
2.边框
{border:1px solid gray;}
设置边框,1像素,实线,灰色
{border-bottom:1px solid gray;}
设置下边框,会延伸到页面边缘
{text-decoration:underline;}
设置文本的下划线,只出现在文本下方
3.合并
对于规则一样的元素,可以合并,如h1,h2{color:red; font-family:sans-serif;}
其中,h1,h2是一个选择器
如果一个元素有多个规则,并且与其他元素有相同的规则,可以合并有相同规则的元素,再将不同规则的单独写出,如h1,h2{font-family:sans-serif;color:white; } h1{border-bottom:1px solid gray; }
4.< link >元素
可以将样式做成样式表,即.css文件,不同在html中使用style元素,使用link元素。
<link rel="stylesheet" href="xxx.css">
5.继承
在body选择器中设置font-family,那么< body >元素中所有没有设置font-family属性的元素都被设置了font-family。
但不是所有的样式都能继承。
如果样式会影响文本的外观,所有这些样式都能继承,如字体颜色(color属性)、font-family(字体系列),以及所有与字体相关的属性,如fony-size(字体大小)、font-weight(字体粗细)、font-style(是否斜体)。
6.覆盖继承
如果父元素和子元素都有相同的属性,但属性的值不同,那么子元素不会继承父元素的那个相同的属性的值。
如果想给< body >中的某一个元素设置为其他字体,那么可以直接单独给此元素设置样式,如body{font-family:sans-serif;}p{font-family:serif;}
对于CSS,总会使用特定的那个规则。
7.类
如果想给不同的元素设置一些不同的样式,或者给多个相同的元素设置不同的样式,就需要用到类。
比如给其中一个< p >元素设置额外的样式:html文件中:<p class='xxx'> css文件中:p.xxx{ }
为多个元素设置额外的样式:blockquote.xxx,p.xxx{ }
.xxx{ }表示xxx类的所有元素都有同种样式
一个元素可以加入多个类:<p class='xxx yyy zzz'>
其中xxx、yyy、zzz为三种类,最终p的类由css文件中这三种规则的最后一个规则决定,与class属性的值中的类名顺序无关
8.关于字体
8.1 color:
设置文本元素的字体颜色
8.2 font-weight:
作用:控制文本的粗细。
值:
- 由细到粗依次是:lighter(不常用)、normal、bold、bolder(不常用)。
- 可以设置为100到900之间的数(100的倍数)。(不常用)
bold可以用来设置粗体。
如果一个元素默认地设置为bold,或者从父元素继承了粗体,可以用normal去掉粗体样式。
8.3 font-size:
设置字体大小body{font-size:14px;} h1{font-size:140%;} h2{font-size:1.2em;} h3{font-size:small;}
- 像素表示字体的高度。(不建议)
- 百分号表示h1相对于它的父元素的字体大小的140%。
- em表示h1是父元素的1.2倍。
- 可以用关键字如xx-small,x-small,small,medium,large,x-large,xx-large表示,其中,大多数浏览器small约12px,每个关键字大约比前一个大20%。
选择字体大小的方法妙招:
标题默认字体大小:
默认字体通常是16px,如果在body里用百分数或者em,则表示相对于默认字体的百分比。
8.4 font-family
设置字体。值可以设置多个,防止字体不能使用。如果字体名称中间带有空格,应该加引号。但是这些字体用户电脑必须安装才能显示。
如果用户没有安装字体也没关系,可以使用web字体向浏览器提供的一种字体,要用到@font-face规则。这个规则允许你定义一种字体的名字和位置,然后可以在你的页面使用。
8.5 font-style
作用:为字体增加风格
值:italic斜体风格,oblique倾斜文本。两者区别不大。
8.6 其他属性
left:指定一个元素的左边所在位置
line-height:设置一个文本元素的行间距
background-color:控制元素的背景颜色
background-image:在元素后面放置一个图像
border:在元素周围加边框,如实线边框,凸起边框,虚线边框…
padding:如果在一个元素边缘和它的内容之间需要有空间,可以使用padding(内边距)
letter-spacing:设置字符间距
list-style:改变列表中列表项的外观
9 关于颜色
- 直接用英文单词表示
- 用16进制表示。
body{background-color:#cc6600;}
以#开头,每两组数字分别代表颜色的红绿蓝分量。#cc6600可以简写为#c60 - 按红、绿、蓝分量的多少指定一个颜色
body{background-color:rgb(80%,40%,0%);}
- 直接用数值表示
body{background-color:rgb(204,102,0);}
其中,255的80%就是204,255的40%是102。
10. 文本装饰
10.1text-decoration属性
值:underline加下划线,none去除装饰,overline加上划线,line-through加删除线。
一次可以设置多种装饰em{text-decoration:underline overline;}
10.2< del >,< ins >
< del >将html中的某些内容标记为要删除的内容
< ins >标记要插入的内容
10.3 border-bottom
h1{border-bottom:thin dotted #888888;}
在下边框上加一条细的虚线。