CSS 属性取值是没有区别的,在开发中通常称为键值对,举个例子:
color:yellow
那么color为属性,而yellow为取值,这是配对的
CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1declaration2... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:redfont-size:14px}
如图所示:
今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧!一、与HTML的结合方式
CSS与HTML的结合方式一共有三种,分别是:外部样式、内部样式和内联样式。
①外部样式
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部:
_
或者可以像下面这样在标签import一个样式表,不过不建议使用。
___
@import"main.css"_
②内部样式
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表,就像这样:
_
___
_r_color:_ienna}_
③内联样式
要使用内联样式,你需要在相关的标签内使用样式(style)属性。
_
Thisisaparagraph
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
二、CSS语法
CSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。两条声明之间被分号分开。
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
在下面这个例子中,h1是选择器,color和font-size是属性,red和14px是值。
三、选择器
CSS的选择器主要分为两大类,一类基本选择器;一类扩展选择器。
①基本选择器
基本选择器包括id选择器,元素选择器和类选择器。
id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。
#red{color:red}
元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。
div{color:red}
类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。
.center{text-align:center}
②扩展选择器
扩展选择器是在基本选择器的基础上扩展出来的,下面介绍几种常见的。
*选择器(*
{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。
*{color:red}
并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。
div,span{color:red}
子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。
divspan{color:red}
父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。
div>span{color:red}
属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中,元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。
div[align="center"]{color:red}
伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。
a:hover{color:red}
四、盒子模型
所有HTML元素可以看作盒子,在CSS中,"box
model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型:
Margin(外边距)-清除边框外的区域,外边距是透明的。
Border(边框)-围绕在内边距和内容外的边框。
Padding(内边距)-清除内容周围的区域,内边距是透明的。
Content(内容)-盒子的内容,显示文本和图像。
默认情况下,标签的width和height属性指的是content(内容)的宽和高,我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小,可以设置下面的代码:
box-sizing:border-box
以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章,希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助,想要了解更多web前端知识记得关注北大青鸟web培训官网,最后祝愿小伙伴们工作顺利,城市一名优秀的web前端程序员。
文章来源:原创_绲墓适_
如果想在默认模板上简单的修改、附加扩展css,只需要在你对应的模板套系下手动添加一个对应的扩展css文件就可以了,例如你想修改或者添加common.css中的代码,只需要在自己创建的模板套系目录的对应位置:common文件夹下新建一个extend_common.css文件,然后将自己要修改或者扩展的css代码。将在生成缓存css时,自动追加到默认模板的css文件tmplate/default/common/common.css解析成你当前的模板id缓存文件。CSS 继承规范:
Discuz! X系列产品中 CSS 文件会在缓存时按照以下顺序进行合并:
template/default/*.css 文件。
当默认模板是非默认模板时,template/模板目录/extend_*.css 文件 或 template/模板目录/*.css。
当某插件启用时,source/plugin/插件目录/template/extend_*.css 文件。
因此非默认模板目录中的 CSS 属性将继承默认模板中的 CSS 属性,插件目录中的 CSS 文件将继承前二者的 CSS 属性。
CSS 自身的集成顺序为:当 CSS 属性名称相同时,CSS 文件中,写在后面的替换前面的代码。
CSS书写规范:
属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400pxheight: 300px} 。
属性的书写顺序:
位置:position,left,right,float
盒模型属性:display,margin,padding,width,height
边框与背景:border,background
段落与文本:line-height,text-indent,font,color,text-decoration,...
其他属性:overflow,cursor,visibility,...
针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:-moz-box-shadow:box-shaow:
按照元素模型由外及内,由整体到细节书写,大致分为五组:
谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式
选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl ->Clearfix
勿使用冗余低效的 CSS 写法,例如:ul li a span { ... }
慎用 !important
建议使用在 class/id 名称中的词语
表示状态:a->active
表示结构:h->header,c->content,f->footer
表示区域:mn->main,sd->side,nv-navigation,mu->menu
表示样式:l-list,tab,p_pop
常用css实例:
兼容IE浏览器css hack
所有 IE浏览器适用:
.ie_all .foo { ... }
IE6 专用:
.ie6 .foo { ... }
IE7 专用:
.ie7 .foo { ... }
IE8 专用:
.ie8 .foo { ... }
浮动样式及浮动元素父元素高度自适应样式代码:
.z/.y 浮动 left/right .z { float: left} .y { float: right}
.cl:after { content: "."display: blockheight: 0clear: bothvisibility: hidden} .cl { zoom: 1}
大标题字体:
.wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-seriffont-weight: 100}
外边距样式:
.mtn { margin-top: 5px !important}
.mbn { margin-bottom: 5px !important}
.mtm { margin-top: 10px !important}
.mbm { margin-bottom: 10px !important}
.mtw { margin-top: 20px !important}
.mbw { margin-bottom: 20px !important}
文字字体大小:
.xs0 { font-family: {SMFONT}font-size: {SMFONTSIZE}-webkit-text-size-adjust: none}
.xs1 { font-size: 12px !important}
.xs2 { font-size: 14px !important}
.xs3 { font-size: 16px !important}
内边距样式:
.ptn { padding-top: 5px !important}
.pbn { padding-bottom: 5px !important}
.ptm { padding-top: 10px !important}
.pbm { padding-bottom: 10px !important}
.ptw { padding-top: 20px !important}
.pbw { padding-bottom: 20px !important}
module.css文件架构解析(此文件必须按照格式编写):
/** group::index **/
/* 群组 index 模块使用的CSS */
/** end **/
/** group::index,forum::index **/
/* 群组 index 和 论坛 index 模块使用的CSS */
/** end **/
/** forum **/
/* 论坛 所有模块使用的CSS */
/** end **/
实现模块化css分部加载!格式固定多个模块用”,“隔开例如:
/** misc::invite,group,forum::viewthread,portal::view,home::space **/
这个文件的分部加载是对应程序地址例如:forum.php?mod=forumdisplay,应当按照CURSCRIPT::$mod格式写即:forum::forumdisplay。