小白学习css记录1

代码显示

html部分

 
  
  
  
 
 
  
嘿嘿嘿
  
我爱你，就像老鼠爱大米
  
你是我的小呀小苹果，怎么爱你都不嫌多。
  
abcdefg
 

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元素。

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文件中：

css文件中：p.xxx{ }
为多个元素设置额外的样式：blockquote.xxx,p.xxx{ }

.xxx{ }表示xxx类的所有元素都有同种样式

一个元素可以加入多个类：

其中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;}

在下边框上加一条细的虚线。