Heim > Web-Frontend > HTML-Tutorial > CSS样式图文详解:css样式表和选择器_html/css_WEB-ITnose

CSS样式图文详解:css样式表和选择器_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:35:56
Original
1586 Leute haben es durchsucht

主要内容

  • CSS概述
  • CSS和HTML结合的三种方式:行内样式表、内嵌样式表、外部样式表
  • CSS四种基本选择器:标签选择器、类选择器、ID选择器、通用选择器
  • CSS三种扩展选择器:组合选择器、后代选择器、伪类选择器
  • CSS样式优先级
  • CSS 概述

    CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

    接下来我们要讲一下为什么要使用CSS。

    HTML的缺陷:

    1. 不能够适应多种设备
    2. 要求浏览器必须智能化足够庞大
    3. 数据和显示没有分开
    4. 功能不够强大

    CSS 优点:

    1. 使数据和显示分开
    2. 降低网络流量
    3. 使整个网站视觉效果一致
    4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

    比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。

    CSS语法

    语法格式:

    选择器{	属性名: 属性值;	属性名: 属性值;}
    Nach dem Login kopieren

    解释:
    选择器代表页面上的某类元素,选择器后一定是大括号。
    属性名后必须用冒号隔开,属性值后用分号(最后一个属性可以不用分号)。
    属性名和冒号之间最好不要有空格(经验)。
    如果一个属性有多个值的话,那么多个值用 空格 隔开

    举例:

    p{color: red;}
    Nach dem Login kopieren

    完整版代码举例:

    <style type="text/css">	p{		font-weight: bold;		font-style: italic;		color: red;	}</style> <body>	<p>洗白白</p>	<p>你懂得</p>	<p>我不会就这样轻易的狗带</p> </body>
    Nach dem Login kopieren

    效果:

    css代码的注释:

    格式:

    <style type="text/css">	/*		具体的注释	*/	p{		font-weight: bold;		font-style: italic;		color: red;	}</style>
    Nach dem Login kopieren

    注意:只有/* */这种注释,没有//这种注释。而且注释要写在