CSS知识点整理之基础篇

最新推荐文章于 2021-12-28 21:37:18 发布

Vigee

最新推荐文章于 2021-12-28 21:37:18 发布

阅读量447

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/wenmiao27/article/details/24809901

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本篇大部分知识点源自Eric A.Mayer编著的《CSS权威指南》一书以及W3School教程网。
CSS存在的必要性及其特性：
 
 拥有丰富的样式，达成HTML无法达成的文档外观。
易于修改文档，减少WEB创作人员的工作量。
为多个页面创建一致的外观，方便整齐。
可层叠的冲突规则，容易修改，更专业。
缩减文档大小。
作为HTML的补充，为将来做准备。 
  
  基本语法： 
  
  
   
  
  
           
  CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 
  
  
  如：

h1 {color:red; font-size:14px;} /*定义文档中h1元素的颜色值为红，字体大小为14px*/ 
  
 其中h1为选择器，可以将任意多个选择器分组在一起，用逗号隔开即可，数量无限制。
 如：
 
 h1,h2,h3,h4,h5,h6 {
  color: green;
  }
 
 
 关于选择器的具体内容另开一文章记录。
 
 
 CSS样式表种类及引入文档方式
  
  外部样式表
候选样式表
内部样式表
内联样式（文档样式表） 
  
    外部样式表并不是HTML文档的一本分，但可以由HTML文档使用。为了成功的加载一个外部样式表，可以 
   使用link标记。 
   
  
    如： 
   
   
   <head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head> 
   
   
    浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 
    其中rel代表关系（relation），关系为stylesheet，type总是设置为text/css。href属性的纸是样式表的URL，可以是绝对URL，也可以是相对URL。 最后还有一个可选属性media，用于指定样式表被接受的介质或媒体。允许的值有 
   
 
   screen (缺省值)，提交到计算机屏幕；
print， 输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
tv，电视机；
all，所有输出设备。 多样的媒体通过用逗号隔开的列表或值all指定。 
   
   
   
 
   
  
    link标记引入外部样式表可以定义 
   候选样式表，将rel值置为alternate stylesheet，并定义link元素的title属性值即可。候选样式表是只有在用户选择这个样式表时才会用于文档表现。 
   
  
    如果没有为样式表指定title，那么它将作为一个永久性样式表，始终用于文档的显示。通常，这是创作人员所希望的。 
   
   
   
 
   
   
   
 
   
  
    另外，另一种引入外部样式表的方式是 
   使用@import指令。 
   
  
    只是要注意以下，摆放的位置，因为@import是css定义的引用样式的方法，所以它应该放在<style>元素里面。 
   
  
    它前面不能够有任何其他规则（当然，不包括其它的@import，因为一个<style>里可以放不止一个@import），否则，后面导入的样式将失效。 
   
  
    如： 
   
 
   <style type="text/css">
<!-- /* 把声明的样式包含在一个html注释中，这样可以解决较老的浏览器不识别style的问题 */
@import url("style2.css");/* @import出现在样式表开头 */
body {background:grey;}
@import url(style3.css);/* @import前面有样式，所以被忽略 */
-->
</style> 
   
   
   
 
  
 内部样式表
 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
 如：
 
 <head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

 内联样式
 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。 
 本例展示如何改变段落的颜色和左外边距：
 
 <p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>