CSS(一):认识CSS
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 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 标签内部)
- 内联样式(在 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>; }

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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

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