星号选择器(*)表示选中所有的元素。
* 选择器选取所有元素。
* 选择器也能选取另一个元素中的所有元素。
注意:*选择器比较消耗性能,尽量避免使用,应使用更加精确的选择器选择元素。
1:标签选择器
标签选择器,是所有带有某种标签的都生效。这里以p为例,也就是所有的带有p标记的都会这样的样式
复制代码代码如下:
<html><head><styletype="text/css">p{font:"宋体"; color:#FF0000}</style></head><body><pid="p1">偶现在表现的是标签选择器</p><pid="p2">偶也用的是标签选择器</p><h1>偶没有被任何的选择器修饰</h1></body></html>
2:id选择器,注意id选择器是唯一的,因为只有id="yy"的才有这种样式,而一个页面里元素的Id必须是唯一的,所以。。。你懂得id选择器以#开头用法是:id=""
复制代码
代码如下:
<html><head><styletype="text/css">#yy{font:"宋体"; color:#FF0000}</style></head><body><pid="yy">偶现在表现的是id选择器</p><pid="p">偶没有被id选择器修饰</p><h1>偶没有被任何的选择器修饰</h1></body></html>
3:类选择器,类选择器以.开头 只要把元素的class="" 就能表现为这种样式了用法是:class=""
复制代码
代码如下:
<html><head><styletype="text/css">.yy{font:"宋体"; color:#FF0000}</style></head><body><pclass="yy">偶现在表现的是类选择器</p><pclass="yy">偶没有被类选择器修饰</p><h1>偶没有被任何的选择器修饰</h1></body></html>
.
将表格渲染出来,能够看到表格是最基本的,如果连表格都没有的话,怎么去设置它的样式.呈现表格,代码如下: <table> <thead> <tr> <td>表格</td> <td>表格</td> <td>表格</td> <td>表格</td> </tr> </thead> <tbody> <tr> <td>表格</td> <td>表格</td> <td>表格</td> <td>表格</td> </tr> </tbody> </table>
2.
上面的表格是没有任何样式的,如果你不看代码还以为没有用到样式呢.这一步将样式加上,加的是边框样式,代码如下: td{ border: 1px solid red; } 因为TD是标签,无需加其它任何的样式,只需要针对它添加样式即可.
3.
同样的,你可以给TD加上其它的样式 ,比如大小,边距等等,代码如下: td{ border: 1px solid red; width: 30px; margin: 10px; }
行内样式拥有最高级。
行内样式又叫标签样式,它是在标签里面加上style属性内嵌样式的样式写在style标签里面(style标签在head标签内)外链样式:第一步:建立一个.css的文件,在里面写css样式, 第二步:head标签内写入link标签(link可以存在在body标签里但是不推荐用), 第三步:link里href属性将css文件引入。导入样式是把@import放在style标签中