CSS入门学习

2019-07-13 本文已影响0人 jacob_

1 引言

CSS指层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，而样式通常存储在外部样式表中，而外部样式表通常存储在CSS文件中。
因此我们要学习的就很显然了，首先是CSS的基础内容，其次如何将其保存为外部样式表，最后在HTML代码中引用。

2 CSS基础内容

2.1 CSS规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
image.png
选择器通常是您需要改变样式的 HTML 元素。例如p或者h1，或者使用相应的ID选择器或者类选择器。
例子：

p       
{        
text-align:center;       
/*这是另一个注释*/        
color:black;        
font-family:arial;       
}

2.2 ID选择器与类选择器

ID选择器
当使用上面的p进行改变样式时，会影响整个HTML页面的p元素。但如果只想改变某一个元素时，应当使用ID选择器。
用法：ID选择器以关键字 # 作为标识；
下面的例子将作用于id = 'jacob'

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
#jacob
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="jacob">Hello World!!!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

另需要注意的是，<style></style>标签放在head标签中。

Class选择器
用于描述某一类元素的样式，与ID选择器的区别在于其可以选择某一组元素。
用法：以关键字 . 作为标识；

<html>
<head>
<meta charset="utf-8"> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

此外，还可以指定特定元素的类选择器。

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p> 
</body>
</html>

2.3 样式表

插入样式表的三种方式

外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
下面是一个样式表文件的例子：

hr {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

此外需要注意的是：
如果外部样式表、内部样式表同时对某个元素进行了样式定义，那么需要注意这里有一个继承与覆盖的过程。
一个例子如下：
外部样式表：

h3            
{            
color:red;            
text-align:left;            
font-size:8pt;            
}

内部样式表：

h3            
{            
text-align:right;            
font-size:20pt;            
}

那么得到的结果是：

color:red; text-align:right;           
font-size:20pt;

需要注意的是：
!important 关键字会覆盖所有，就比如在外部样式表中使用!important，其不会被内部样式表与内联样式覆盖。
权重计算方式：

image.png
一个简单的例子如下：

<html>    
<head>    
<style type="text/css">    
#redP p {    
/* 权值 = 100+1=101 */    
color:#F00;  /* 红色 */    
}    
#redP .red em {    
/* 权值 = 100+10+1=111 */    
color:#00F; /* 蓝色 */    
}    
#redP p span em {    
/* 权值 = 100+1+1+1=103 */    
color:#FF0;/*黄色*/    
}    
</style>    
</head>    
<body>    
<div id="redP">   
<p class="red">red   
<span><em>em red</em></span>    
</p>    
<p>red</p>    
</div>    
</body>   
</html>

根据权重的计算结果，em显示为蓝色。

2.4 背景

CSS 属性定义背景效果：

background-color
background-image
background-repeat
background-attachment
background-position

background-color 属性定义了元素的背景颜色。

<style>
body
{
    background-color:#b0c4de;
}
</style>

整个页面的颜色会变成蓝色。

<style>
h1
{
    background-color:#6495ed;
}
p
{
    background-color:#e0ffff;
}
div
{
    background-color:#b0c4de;
}
</style>

对应的元素背景改变。

background-image 属性描述了元素的背景图像.

<style>
body 
{
    background-image:url('https://7n.w3cschool.cn/attachments/knowledge/201611/31824.png');
    background-color:#cccccc;
}
</style>

该方法会使得背景图片在整个元素内平铺，若想改变平铺方式则可以利用以下几个方法。

body 
{ 
background-image:url('gradient2.png'); 
//仅在x方向平铺
background-repeat:repeat-x; 
}

body 
{ 
background-image:url('img_tree.png'); 
//不平铺
background-repeat:no-repeat; 
}

可以利用 background-position 属性改变图像在背景中的位置:

body 
{ 
background-image:url('img_tree.png'); 
background-repeat:no-repeat; 
background-position:right top; 
}

body        
  {        
   background-image:url('img_tree.png');        
   background-repeat:no-repeat;        
//水平66%处，吹制33%处
  background-position:66% 33%;        
}

body       
  {       
   background-image:url('img_tree.png');        
   background-repeat:no-repeat;        
//相对于左上角的偏移量。
  background-position:50px 100px;        
  }

2.5 文本

Text Color

<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

文本的对齐方式

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style>
h1{text-align:center}
p.date{text-align:right}
p.main{text-align:justify}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界;当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家;当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭;在家人的帮助和鼓励下，我可能为国家做一些事情;然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>

</html>

image.png

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

文本修饰

<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>

文本修饰

文本转换

<style>
//转换为大写
p.uppercase {text-transform:uppercase;}
//转换为小写
p.lowercase {text-transform:lowercase;}
//首字母大写
p.capitalize {text-transform:capitalize;}
</style>

文本缩进

p {text-indent:50px;}

文本间隔
改变字之间的间隔距离

p 
{ 
word-spacing:30px; 
}