css语法规则
① 简述新建css规则中!3种类型的作用
其实你说错了,样式表类型有4种,如下:
1、内联样式表
直接在HTML标记内,插入sytle属性,再定义要显示的样式,这是最简单的样式定义方法。不过,利用这种方法定义样式时,效果只可以控制该标记,其语法如下:
<标记名称 style="样式属性:属性值;样式属性:属性值">
如:<body style=" color:#FF0000;font-family:"宋体";cursor:url(3151.ani);">
2、 嵌入样式表
<style type="text/css">
内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
<style>元素是用来说明所要定义的样式。TYPE属性是指定style元素以css的语法定义。有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式<!-- 注释 -->隐藏内容而不让它显示。
3、外部样式表
<link href="样式表地址" rel="stylesheet" type="text/css" />
4、输入样式表(很少采用)
可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中,被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分,也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中,被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句。
<style>
@import url(http://……)
</stypel>
4种样式表的优先级为:内联样式表 > 嵌入样式表 > 外部样式表 > 输入样式表
② CSS的基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器 {宣言1; 宣言2; ... 宣言N }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
选择器 {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构:
值的不同写法和单位
除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000: p{color:#ff0000;}为了节约字节,我们可以使用 CSS 的缩写形式: p{color:#f00;}我们还可以通过两种方法使用 “红绿蓝”RGB 值: p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
值为若干词须写引号
提示:如果值为若干词,则要给值加引号,值为中文也建议加上引号: p{font-family:sansserif;}多重声明
如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样: p{text-align:center;color:red;}你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样: p{text-align:center;color:black;font-family:arial;}空格和大小写
大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑: body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
③ css 文档中css语句的通用语法规则有几种写出这些规则的一般形式
通常
匹配ID以#开头
匹配类以.开头
匹配HTML标签则直接写标签名
比如这段代码:
<div id="test">
<span class="cls">
<li id="sub"></li>
</span>
</div>
要写CSS语句的话应该这样
<style type="text/css">
.cls{
/*CSS类定义代码在这里*/
}
#test{
/*会匹配ID为TEST的标签*/
}
div{
/*所有DIV标记都被我匹配*/
}
</style>
更高级一点的应用
伪类模式:
#test span{
//以空格隔开 表示匹配以test为ID标签内的SPAN标记都会匹配
}
同样道理
div span{
//the same!
}
.cls #sub{
//理会一下
}
恩其实还有很多模式匹配 这都要自己去实践一下比较好
CSS就象99乘法表 但是不用背只要你知道规则并能灵活应用就OK了,可以看CSS参考文献来补充这方面的不足.
我的QQ 174419041 欢迎交流
④ CSS样式表有哪几类规则
1、内联样式表
直接在HTML标记内,插入sytle属性,再定义要显示的样式,这是最简单的样式定
义方法。不过,利用这种方法定义样式时,效果只可以控制该标记,其语法如下:
<标记名称 style="样式属性:属性值;样式属性:属性值">
如:<body style=" color:#FF0000;font-family:"宋体";cursor:url(3151.ani);">
2、 嵌入样式表
<style type="text/css">
内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的
<head>
……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……
</head>
<style>元素是用来说明所要定义的样式。TYPE属性是指定style元素以css的语法定义。有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式<!-- 注释 -->隐藏内容而不让它显示。
3、外部样式表
<link href="样式表地址" rel="stylesheet" type="text/css" />
4、输入样式表
可以使用css的@import声明将一个外部样式表文件输入到另外一个css文件中,被输入的css文件中的样式规则定义语句就成为了输入到的css文件的一部分,也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中,被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句。
<style>
@import url(http://……)
</stypel>
⑤ CSS的语法规则是什么,试举例说明
看你用哪种方式嵌入到html,有内联样式表、内部样式表、外部样式表。三种的各不一样。常用的是外部,例如:p{color: green;}。
⑥ 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语法规则望指教
选我的答案把,
我阅读了你这个类,主要是用来清除浮动的,
具体和我们往常的清除浮动实现方法不一样。但是这种方法目前来说不值得推广。
这个类的意思就是说, 只要我调用了clearfix类,那么他就会在这个调用这个类的元素的后面生成一个占据0像素的行清除浮动。(平时我们清除浮动的设置成0像素 都是无效的 ,这种方法有效。)
content: "."; 这个属性是配合伪对象:after使用的。
当伪对象:after 使用content属性,是用来设置在对象后发生的内容。
也就是说 ,当一个元素 调用了带有:after伪对象类的时候,他在元素结束了自身的属性后,会使用content:所设置的属性来书写一个新元素。(目前主流浏览器大部分不支持)
而content: "."是调用字符串 “.”。
也就是说,他会在元素后面显示一个点“.”。
* html>body .clearfix {}
这个是一个hack的写法,由于浏览器的兼容问问题 “>” 这个选择器在IE6下面不支持,
意思是 所有标签(*) 下面的 html标签的子标签body 的 clearfix类
“>”子对象选择符。选择所有作为html子对象的 body 。
⑧ 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样式表与HTML语言的语法规则的区别
css html 语法规则区别 很难用语言表达
⑩ css选择器有哪几种语法规则是什么
1. 标签来名选择器 div { color:Red;} 即页面自中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示