统计
  • 建站日期:2021-03-10
  • 文章总数:518 篇
  • 评论总数:151 条
  • 分类总数:32 个
  • 最后更新:4月20日
文章 未分类

css基本知识

梦幻书涯
首页 未分类 正文
CSS基础知识

1.什么是CSS
2.CSS能完成的工作
3.CSS的特点
4.CSS的常用类型与基本语法
5.在网页中使用CSS的3种方式
6. CSS属性单位
7.CSS的优先级

1.什么是CSS

    CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的方式设置网页格式。

    具体说,CSS是一组样式,样式中的属性在HTML元素中依次出现,并且显示在浏览器中。

    样式可以定义在HTML文档的标志(TAG)里,也可以在外部附加文档作为外加文档,此时,一个样式表可以用于多个页面,甚至整个站点,因此,具有更好的易用性和扩展性.

2.CSS能完成的工作

  • 弥补HTML对网页格式化功能的不足,126323,行距等.
  • 字体变化和大小.
  • 页面格式的动态更新.
  • 排版定位等.

3.CSS的特点

1)将结构和格式分离.

    HTML语言定义网页结构和各要素功能,而CSS将定义结构和格式的部分分离,使我们对页面的布局施加更多的控制。HTML仍然可以保持简明;CSS独立出来从另一个角度控制页面外观。

2)以前所未有的能力控制页面布局.


    HTML 语言对页面总体上的控制有限,如精确定位,行间距或者字间距等,这些都可以通过CSS来实现.

3)制作体积更小,下载更快的网页.

    样式表是简单的文本,像HTML那样,它不需要图像,不需要执行程序,不需要插件。体积的代码,减少图像用量,从而减小文件尺寸。

4)将许多网页同时更新,比以前更快更容易.

  没有CSS时,要想更新整个站点中所有主体文本的字体,必须要一页一页地修改.利用CSS就可以将站点上所有的网页都指向单一的一个CSS文件,只要修改CSS文件中某一行,那么整个站点都会随之发生变动.

5)浏览器将成为更友好的界面.

   CSS的代码有很好的兼容性, 如果用户丢失了某个插件时不会发生中断,或者使用旧版本的浏览器时代码不会出现杂乱无章的情况,只要是可以识别串接样式表的浏览器就可以应用它.

 

4.CSS的常用类型与基本语法:

1)自定义CSS

    我们可以在文档的任何区域或者文本中应用自定义的CSS,如将自定义的CSS应用于一段文字,那么会在相应标记中出现”Class”属性,它的属性值即为自定义的css名称.

    如果将自定义的CSS用于部分文字上,那么会出现<span>和</span>标记,并且在其中包含”class”属性,如下代码:

  .bg{ background-image: url(bg.gif);}    <body class=“bg”>

2)重定义标记的CSS

    我们可以针对某一个HTML标记来定义CSS,也就是说定义的CSS将应用于选择的标记,例如我们为<body></body>标记定义了CSS,那么包含在<body></body>标记中的内容都将遵循定义的CSS.如:

   body { color:#000099; font-sise:9pt}

3)CSS选择符

    CSS选择符为特殊的组合标记定义CSS,使用id作为属性,以保证文档具有唯一可用的值。css选择符是一种特殊类型的样式,常用的4种是:

  • a:link:  设定正常状态下链接文字的样式.
  • a:actived:  设定鼠标单击时链接的外观.
  • a:visited:  设定访问过的链接外观.
  • a:hover:  设定鼠标放置在链接文字上时文字的外观.

如下面的代码:

a:link { color:#ff3366; font-family:”宋体”;text-decoration:none;}

a:hover{ color:#ff6600; font-family: ”宋体”;text-decoration:none}

a:visited {font-family:”宋体”; color:#ff3366; text-decoration:none}

 

5.在网页中使用CSS的3种方式

方式一: 内联样式表(Inline Styles)

    内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性,格式如:

  <标记符 style=“属性1:值1;属性2:值2;…” > 

    这种写法主要在标记中引用,比如要让H3标记中的字体大小为10pt,以红色显示,可以写成

    <h3 style=“font-sise:10pt; font-color:red”>

    这种写法虽然直观,但是无法体现出层叠样式表的优势,因此不推荐使用             

优点:可修饰单独的标记符

缺点:没有发挥CSS统一设置格式的优势

方式二: 内部样式块对象 (Embedding a Style Block

    在HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。如:

<STYLE TYPE=“TEXT/CSS”>

H1 { font-size:x-large; color:red }

H2 { font-sise: large; color:blue }

</STYLE>

上面代码定义了<H1><H2>标记使用的字号和颜色. 其中<STYLE></STYLE>之间是样式的内容;TYPE 一项使用的是TEXT中的CSS写的代码;{ }前面是样式的类型和名称,{ }中的是样式的属性.

<html>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p  {font: 10pt/12pt "Arial"; color: black}
-->
</style>
<body>

请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。

优点:有利于统一设置单个网页的格式

缺点:不便统一设置多个网页的格式

方式三: 链入外部样式表文件 (Linking to a Style Sheet)

    先建立外部样式表文件(.css),然后使用HTML的link对象。如下:

    <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>

  CSS的定义既可以是在文档内部,也可以单独成文件,上面的代码就是将CSS样式链接到外部的style.css文件.

优点:可设置多个网页的统一格式,常用于网站

6. CSS属性单位


    长度单位:cm, em, ex, in, mm, pc, pt, px


    百分比单位:(有些不支持,见课本P132)


    颜色1233单位:

     颜色英文名               red
     #RRGGBB                 #003366 #RGB, #036
     rgb(rrr, ggg, bbb)      rgb(0,225,0)
     rgb(rrr%, ggg%, bbb%)   rgb(50%,0,50%)

7.CSS的优先级

  将两个或更多的 CSS 样式应用于同一文本时,这些样式可能发生冲突并产生意外的结果。浏览器根据以下规则应用样式属性:

  1. 如果将两种样式应用于同一文本,浏览器显示这两种样式的所有属性,除非特定的属性发生冲突。例如,一种样式可能将蓝色指定为文本颜色,而另一种样式可能指定红色作为文本颜色。
  2. 如果应用于同一文本的两种样式的属性发生冲突,则浏览器显示最里面的样式(离文本本身最近的样式)的属性。因此,如果外部样式表和内联 CSS 样式同时影响文本元素,则内联样式为其中所用的一个。
  3. 如果有直接冲突,则 CSS 样式(使用 class 属性应用的样式)中的属性将取代 HTML 标签样式中的属性。

总结:“就近优先”原则

    在下面的示例中,为 h1 定义的样式可以指定所有 h1 段落的字体、大小和颜色,但应用于该段落的自定义 CSS 样式 .Blue 将取代 H1 样式中的颜色设置。另一个自定义 CSS 样式 .Red 将取代 .Blue,因为它位于 .Blue 样式的内部。

返回
<h1><span class="Blue">该段落受自定义样式 .Blue 和 HTML 标签样式 h1 的控制。 <span class="Red">但这个句子受 .Red 样式的控制。< /span> 现在,我们返回到 .Blue 样式。< /span></h1>

 

 

 

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

这篇文章最后更新于2018-11-18,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
c#代码例子大全
« 上一篇
c++例子代码总结
下一篇 »

发表评论

HI ! 请登录
注册会员,享受下载全站资源特权。
Array

日历

热门文章