目录
1.什么是CSS
2.CSS能做什么
3.CSS语法结构
4.如何引入CSS
  4.1 外部样式表
  4.2 内部样式表
  4.3 内联样式
  4.4 三种引入方式的优先级对比
5.CSS代码注释
6.CSS选择器
  6.1 通配符选择器
  6.2 元素选择器
  6.3 群组选择器
首页 web前端 html教程 CSS(一):认识CSS

CSS(一):认识CSS

Aug 10, 2016 am 08:49 AM

1.什么是CSS

CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>
登录后复制

transform为CSS3的新属性,各浏览器都需要添加前缀来支持。

2.CSS能做什么

  • 样式定义如何显示HTML 元素。
  • CSS把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。
  • CSS简化了前端开发工作人员的设计过程,更灵活的页面布局,更快的页面加载速度。
  • 可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的代码,那么整个站点的所有页面都会随之发生变动。
  • 目的:将表现与结构分离。
<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}
登录后复制
<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span></span></span>
登录后复制

3.CSS语法结构

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,选择器通常是你需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}
登录后复制

4.如何引入CSS

引入样式表的方法有三种:

  • 外部样式表
  • 内部样式表
  • 内联样式

  4.1 外部样式表

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

<span style="color: #800000;">
  <link rel="stylesheet" type="text/css" href="style.css">
</span>
登录后复制

  4.2 内部样式表

    当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用

<span style="color: #800000;">
    <style>
        p </style></span>{<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
    
        </span>
登录后复制

  4.3 内联样式

    内联样式是指将CSS样式直接写在HTML 标签中的style属性里。注意这种方式的引入CSS,是不需要写选择器的。

<span style="color: #800000;"><p style="color:red;">这是一个段落</p></span>
登录后复制

  4.4 三种引入方式的优先级对比

    当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

5.CSS代码注释

css 代码注释,以 /* 开始 */ 结束。

<span style="color: #008000;">/*</span><span style="color: #008000;"> 公共样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0px</span>;}    
    
<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式开始</span><span style="color: #008000;">*/</span><span style="color: #800000;">
    
#nav </span>{<span style="color: #ff0000;">
      ……
    </span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式结束</span><span style="color: #008000;">*/</span>    
登录后复制

6.CSS选择器

CSS选择器用于选择你想要的元素的样式的模式。

  6.1 通配符选择器

    * 选择器选择所有元素。* 选择器也可以选择另一个元素内的所有元素:

<span style="color: #800000;">*</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
div *</span>{              <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择div元素下的所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}
登录后复制

  6.2 元素选择器

    所谓元素选择符,指以网页中已有的标签名作为名称的选择符。

<span style="color: #800000;">body</span>{               <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为body的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
a</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为a的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}
登录后复制

  6.3 群组选择器

    除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义。使用逗号对选择符进行分隔。对页面中需要使用相同样式的元素,只需写一次样式。

<span style="color: #800000;">h1,h2,h3,p</span>{<span style="color: #ff0000;">         
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}
登录后复制

 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

网页批注如何实现Y轴位置的自适应布局? 网页批注如何实现Y轴位置的自适应布局? Apr 04, 2025 pm 11:30 PM

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

See all articles