CSS入门学习

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 样式表

插入样式表的三种方式

  1. 外部样式表
    当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部
<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);}
  1. 内部样式表
    当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
  1. 内联样式
<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
  1. background-color 属性定义了元素的背景颜色。
<style>
body
{
    background-color:#b0c4de;
}
</style>

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

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

对应的元素背景改变。

  1. 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; 
}

2.6 字体

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • css入门学习一
    ## css学习记录一 ### 写在前面 CSS（cascading style sheets）层叠样式表 可以为...
    无名小卒go阅读 249评论 0赞 0
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,610评论 1赞 45
  • CSS 笔记
    CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或...
    神齐阅读 2,114评论 0赞 14
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1赞 92
  • CSS学习笔记
    1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表，主要用...
    寥寥十一阅读 1,866评论 0赞 6