从使用span元素我们可以看到,css的基本语法。
<元素名 style="属性名:属性值;属性名:属性值2;"/>
元素可以是html的任意元素;
属性名:属性值 要参考w3c组织给出的文档。
css的分类:内部css和外部css。
.style1,表明style1是一个类选择器。
怎么让网页中的背景变成黑白,如彩色图片变成黑白的。用到了滤镜。
选择器是CSS中非常重要的概念。css中有三种不同的选择器。
1.类选择器,通常也叫class选择器。
2.id选择器
3.HTML选择器
4.通配符选择器
.类选择器名{
属性名:属性值
...
}
/*style1就是类选择器*/
.style1{
font-weight:bold;
font-size:30px;
background-color:pink;
}
id选择器
之所以叫id选择器,那是因为用id属性来引用它的。
id选择器用法
基本语法:
#id选择器名{
属性名:属性值;
}
案例:
#style2{
font-size:20px;
backgroud-color:sliver;
}
在html文件中如果要引用id选择器,则
<元素 id='id选择器名'>
html选择器
就是改变html元素的样式,如
/*HTML的选择器*/
body{
color:orange;
}
结论:当一个元素同时被id选择器和类选择器修饰时,优先级是:
id>类选择器>html选择器.
在选定样式时,是使用优先级高的选择器,但是不是优先级高的选择器完全替代优先级低的选择器,而是优先级高的选择器和优先级的选择器的相冲突的样式发生时,选用的是优先级高的样式,而没有冲突时,优先级低的选择器设定的样式仍然会显示。
回顾:
div使用存放html元素的,文字,图片,视频等元素。
css是叠层样式表,用于指定div中内容的样式。
.类选择器名{
}
#id选择器名{
}
id选择器名>类选择器名>html选择器名。
通配符选择器
*{}
如果希望所有的元素都要符合某一种样式,那么可以使用通配符选择器。
样例:
<p><span>some text.</span>
some other text.</p>
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。
<body link="red" text="blue" topmargin="0" leftmargin="0">
你好!!!!!!!!!!<br/>
使得左边距和上边距为0.
当然可以在通配符选择器中这样做。
*{
margin-top:10px;
margin-left:0px;
}
子类选择器。
#style2{
font-size:20px;
background-color:silver;
color:black;
}
/**/
#style2 span{
font-style:italic;
color:red;
}
在一个选择器中再定义标签的样式。
针对:
<span id="style2">这是一则<span>非常重要</span>的新闻</span><br/>
my.css添加了一个父子选择器。
#style2 span{
font-style:italic;
color:red;
}
注意:子选择器标签是html可以识别的标记。