简单了解css3样式表写法和优先级

css3和css有什么区别?首先css33是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。然后是内容上css3主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。而css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。最后在特点上css3新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。css主要能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。(更多详情参考下百度官方给出的介绍:css css3)

下面言归正传,其实今天学习这个主要是想了解css3的transform动画效果,不过貌似第一节课没有提到,有点小失落,这个html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,闲话不多扯,在第一节中笔记如下:

1.html嵌套样式包含内部、外部、内联,通过代码的可复用性,比对最后得出:不建议使用内联样式,内部样式其次,外部样式推荐使用,比方说下面这个最后展示结果字体的颜色是#f90,原因是因为外部<内部<内联,这个是单行的样式,如果页面样式数量过多,超出一定数值,还是建议将这个css的样式与代码相分离,最后通过link链接,具体代码展示如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>简单了解css3样式设计和优先级</title>
 7     <style type="text/css">
 8     div{
 9         color: rebeccapurple;
10     }
11     div.box{
12         color: saddlebrown;
13     }
14     #box{
15         color: blue;
16         /* color: blue!important; */ /*添加的important属性最后读取*/
17     }
18     /*有意思的一点是当这个图片的宽高一致时,border-radius:50%的圆形属性和这个img2的图片直径500px一致*/
19     .box1>img{
20        border-radius: 50%;
21     }/*img尺寸1000x956px*/
22     .box2>img{
23         border-radius: 500px;
24     }/*img2尺寸500x500px*/
25     </style>
26     <link rel="stylesheet" href="demo1.css">
27 </head>
28 <body>
29     <div class="box" id="box" style="font-size: 24px;font-weight: bold;color: #f90;">
30     html嵌套样式包含内部、外部、内联,通过代码的可复用性,比对最后得出:不建议使用内联样式,内部样式其次,外部样式推荐使用,代码展示如下:
31     </div><!--内联样式-->
32     <!-- 新建一个css样式表通过link链接控制这个页面的样式 --><!--外部样式-->
33     <p class="box1"><img src="images/timg.jpg" alt=""></p>
34     <p class="box2"><img src="images/timg2.jpg" alt=""></p>
35 </body>
36 </html>

个人看法是先将外部与内部整合起来,根据html代码从上至下读取,考虑下css优先级:标签<class类<id选择器<内联样式(行内样式),当然如果样式加入important属性值就又是另外一种情况了。

原文地址:https://www.cnblogs.com/dhnblog/p/12329453.html

时间: 2024-11-05 19:30:08

简单了解css3样式表写法和优先级的相关文章

从webkit内核简单看css样式和css规则优先级(权重)

目录 webkit中样式相关类及类间关系 样式规则匹配 权重(优先级)计算 webkit中样式相关类及类间关系 资料来源: <webkit技术内幕> 结构相关类: 1.StyleRuleBase类: 单个的样式规则(选择器+规则体) 2.StyleSheetContents类: 样式规则集,其成员-m_childRules是一个StyleRuleBase实例的列表,是1:n的数量关系 3.CSSStyleSheet类: 成员-m_contents是一个StyleSheetContents实例,

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

表单的元素和样式表

<body><form action="ae.html" method="post"><input type="text" name="gandong" value="hello"/><input type="password" name="gandong value="1234"/><input typ

网页开发学习笔记四: HTML样式表

内嵌样式 只作用于当前文件, 没有真正实现结构表现分离 <head> <style type="text/css"> 样式表写法 </style> </head> 外链样式 作用范围是当前站点, 范围广, 真正实现结构表现分离 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ti

Qt样式表的使用

Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleSheet)是另一种快速改变QT程序UI风格的方法,它很大程度上借鉴和参考了 HTML层叠样式表的语法和思想. StyleSheet文件的默认后缀名为qss,可通过命令行参数 -stylesheet filename.qss 来设置样式表,也可通过QApplication::setStyleSheet或QW

border-radius 样式表CSS3圆角属性

border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ] 如:border-radius:5px 5px 5px 5px; 二.取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. 三.说明: border- radius是一种缩写方法.如果"/"前后的值都存在,那么"

HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式:                  在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>: 内部样式(嵌入式):是由<style></style>标记对放在<head></head>中: 外部样式 :          

Css3之基础-1 Css 概述、样式表使用方式、语法规范

一.CSS 概述 CSS概述 - CSS作用 CSS概念 - CSS (Cascading Style Sheets): 层叠样式表,又叫级联样式表,简称样式表 - 用于 HTML 文档中元素的样式定义 - 实现了将内容与表现分离 - 提高代码的可重用性和可维护性 CSS与HTML之间的关系 - HTML 用于构建网页的结构 - CSS 用于构建 HTML 元素的样式 - HTML 是页面的内容组成,CSS是页面的表现 HTML 属性与CSS样式的使用原则 - W3C 建议尽量使用CSS样式取代

CSS样式表初学,比C#和JS简单

今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS CSS:层叠式样式表 HTML:超文本标记语言 HTML是负责展示你的网页上都有什么内容,都有什么 CSS是负责你的网页上的内容都怎么摆布,什么样的格局 那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想 那我要是告诉你一种