头部背景图

css样式规则的具体格式正确的是(css规则具体有哪些!)

2022-09-15 14:47:58 :6
伪类或伪元素规则的形式如选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }伪类和伪元素不应用HTML的CLASS属性来指定

伪类或伪元素规则的形式如选择符:伪类 { 属性: 值 }或选择符:伪元素 { 属性: 值 }伪类和伪元素不应用HTML的CLASS属性来指定,声明属性一个属性被指定到选择符是为了使用它的样式,如下:选择符.类: 伪类 { 属性: 值 }或选择符.类: 伪元素 { 属性: 值 }定位锚伪类伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links),} 就是给li下面的子元素strong定义一个斜体不加粗的样式,: p, td, li { font-size : 12px ; } 5.派生选择器可以使用派生选择器给一个元素里的子元素定义样式,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,基本语法规则选择符任何HTML元素都可以是一个CSS1的选择符,则默认的sans-serif字体能保证调用; 4.群选择器当几个元素样式属性一样时。

本文目录

css规则具体有哪些!


基本语法
规则
选择符
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,
P { text-indent: 3em }
当中的选择符是P。
类选择符
单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,
《P CLASS=warning》每个选择符只允许有一个类。
例如,code.html.proprietary是无效的。《/p》
类的声明也可以无须相关的元素:
.note { font-size: small }
在这个例子,名为note的类可以被用于任何元素。
一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。
ID 选择符
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符“#“在名字前面。例如,ID选择符可以指定如下:
#svp94O { text-indent: 3em }
这点可以参考HTML中的ID属性:
《P ID=svp94O》文本缩进3em《/P》
关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符
P EM { background: yellow }
是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。
声明
属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

声明的值是一个属性接受的指定。例如,属性颜色能接受值red。
组合
为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
继承
实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色》值也会应用到段落的文本中。
有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。
注解
样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
伪类和伪元素
伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。
伪类或伪元素规则的形式如
选择符:伪类 { 属性: 值 }

选择符:伪元素 { 属性: 值 }
伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:
选择符.类: 伪类 { 属性: 值 }

选择符.类: 伪元素 { 属性: 值 }
定位锚伪类
伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。
一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行伪元素
通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }

css样式代码的基本格式


CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中“p“我们称为“选择器“(selectors),指明我们要给“p“定义样式;
样式声明写在一对大括号“{}“中;
COLOR和BACKGROUND称为“属性“(property),不同属性之间用分号“;“分隔;
“#FF0000“和“#FFFFFF“是属性的值(value)。
2.颜色值
颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法:
body { font-family : “Lucida Grande“, Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
Lucida Grande字体适合Mac OS X;
Verdana字体适合所有的Windows系统;
Lucida适合UNIX用户
“宋体“适合中文简体用户;
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
4.群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
li strong { font-style : italic; font-weight : normal;}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层“div“来实现,而div的样式通过“id选择器“来定义。例如我们首先定义一个层
《div id=“menubar“》《/div》
然后在样式表里这样定义:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中“menubar“是你自己定义的id名称。注意在前面加“#“号。
id选择器也同样支持派生,例如:
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义,例如:
.14px {color : #f60 ;font-size:14px ;}
在页面中,用class=“类别名“的方法调用:
《span class=“14px“》14px大小的字体《/span》
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了“链接、已访问过的链接、鼠标停在上方时、点下鼠标时“的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

CSS编写时标准的格式规范是什么样的


CSS用的是类C#语言的标准。
书写方法自由灵活,没有一定的局限。但是常期以来为了阅读和维护等方面的经验,一般都是这样的格式:
标名 {
属性:属性值;
属性:属性值;
}
当然这样大家都能理解,你自己也好维护,没有什么特殊的要求的!
为了便于阅读有人建议,CSS分为以下方面的控制:
先写位置等:
如:position:absolute;
top,left,width,height等,
空一行,再写布局方面的,如:margin,padding等;
空一行,写字体格式:如line-height等
再空一行,写字体相关!如:font-size,font-color等;
最后是其他的属性!
但一般情况下,我们还是没有必要写那么多的属性值对的!所以就很少有人去空行做这些东西了!
但是一般内容较少时,可以直接写在一行,并不影响阅读的!
纠正一点的是:CSS文件进行调用时并不像一楼所说!不换行可以减少代码的大小!这是毫无根据的臆断!因其会自动解释换行和空白的!代码的大小是因为我们写了一些没有必要的东西所形成的时空代价,比如在body中已经有font-size:9pt;而在BODY中的一个DIV中,如果要设置字体为9pt时没有必要再定义font-size:9pt了,如果再定义就是出现代码时的增大。还有一些默认也没有必要写出。
如果真如一楼所说,我想问一下一楼:你知道吗,在CSS中是可以加注释的,请问注释会不会增加代码量?答案是不会!因为其不运行!
sorry,对不起楼上,我说的是运行方面的,没有说下载方面的事。恕我直言,如果有一个人一个不足0。2K的CSS而写了N个GB的注释的话,那他一定有病了!注释不是发文章,一个CSS文件最多能有多少注释?不过我经常遇到写好的CSS进行压缩加密的情况,为了防止别人偷看,至于说能有多少,一个回车只是一个字符,占8bits,一个byte,请问一下,连写与其能有多大分别?再者请问一下为什么还要分开写呢?这是代码的维护时很难读懂的情况下还要讲时间代价吗?
程序的时空代价是指:运行时间与编写时间的相比,存储空间与运行空间的对比。
对于离散型网页来说,下载页面的同时还在下载CSS文件,而且CSS会放在机器的临时文件夹中,这样,整个网站也用不了下载几个CSS,且下次打开网页不须再下CSS。这样你认为呢?

css编写基本原则正确的是什么


1、基本样式 的写法
《style type=“text/css“》
h1{
font-family:黑体;
}
《/style》
直接些标签名进行定义属性,这个也比较常见。但是它的定义通常放在《style》标签中声明。
2、类class链接样式
定义也通常在《style》标签中声明
《style type=“text/css“》
.style1{
color:red;
font-size:16px;
}
《/style》
引用时候直接在标签的属性中使用class=“style1“ 记住是class属性
《h1》 《/h1》
3、id链接样式
《style type=“text/css“》
#style1{
color:blue;
font-size:16px;
}
《/style》
引用的时候就用标签属性中的id属性 ,要区别于类属性
《h1 id=“style1“》《/h1》
区别:类class链接样式和id链接样式
类连接样式可以适用于多个对象设置同样的属性中,
而id链接样式只能用于一个对象标签中,其他标签则会失效
4、html选择器:
直接用标签进行声明,跟上面的第一个一样
2)派生选择器:
《style type=“text/css“》
h1 h3{
color:red;
font-size:1em;
font-family:黑体;
}
《/style》
h1 h3的写法意思是代表着该css样式只能之《h1》《h3》 《/h3》《/h1》同时出现,且是嵌套使用的时候才能生效
3)id选择器
id选择器的作用是通过id选择器将css样式作用到页面的对象上。写法:
《style type=“text/css“》
#text p{
font-size:1em;
}
《/style》
将该样式绑定到html上,就要这样写
《h1 id=#“text“》这个是不要p的写法
要p的写法
表明该对象只能作用在text对象上的所有p标签中
4)class选择器
《style type=“text/css“》
.fancy{
color:red;
background:#666;
}
《/style》
使用的时候也是
《h1》《/h1》
也可以像上面的一样用派生选择器
《style type=“text/css“》
.fancy td{
color:red;
background:#666;
}
《/style》
说明生效只能在td中
5)分组选择器
h1{color:bule;}
#text{color:bule;}
.play{color:bule;}
这种写法太繁琐了
我们可以使用
h1,#text,.paly{
color:bule;}
这样来定义
6)伪类和伪类选择器
用关键字:lang来定义
《html》
《head》
《style type=“text/css“》
q:lang(smile){
quotes:“∞“
}
《/style》
《/head》
《body》
好吧,展示一下
《p》请看《q》祝你愉快《/q》《/p》
《/body》
《/html》

关于CSS样式的书写规则


.menu ul li:hover a{……}  和 .menu ul li  a:hover{........}虽然最终目标都是a标签,但是前者是a的父级li元素鼠标移上去时触发,后者是a元素本身鼠标移上去时触发。在a和li的大小是一样的时候两者的效果类似,但下面的就不一样了:

《style type=“text/css“》
.menu ul{ list-style:none; margin:0; padding:0; }
.menu ul li a{ text-decoration:none; color: black; }
.menu ul li { height:50px; outline: dot 1px gray;}
.menu ul li:hover a { color: red }
.menu ul li a:hover { color: blue }
《/style》
《div class=“menu“》
《ul》
《li》《a href=“#“》文字内容《/a》《/li》
《/ul》
《/div》

.menu ul li a, .menu ul li a:visited {……} 逗号分隔是同时应用的意思,a:visited是指访问过的a元素,是a元素的子集,所以整条可以用.menu ul li a{……}替代,但是不能用.menu ul li a:visited{……}替代


本文编辑:soogor
暂无评论,期待你的首评
Copyright © 2022 All Rights Reserved 山东上格信息科技有限公司 版权所有

鲁ICP备20007704号

Thanks for visiting my site.