CSS样式

最新推荐文章于 2024-10-03 16:00:14 发布

LH7_dreamer

最新推荐文章于 2024-10-03 16:00:14 发布

阅读量277

点赞数 1

分类专栏： HTML CSS 文章标签： css html 注释编程标签

本文链接：https://blog.csdn.net/zj_dreamer/article/details/51067358

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

刚刚接触学习了css样式表中最基础的东西，慢慢发现学习编程是一件很有趣的事情。坚持，每天进步一点点。


CSS一般在<head>标签中<title>下面定义。
例：<style type="text/css">
      选择符{
           属性：值;
           }
CSS中的注释语句：/*注释*/

【内联式css样式直接写在HTML标签中】
<选择符 style="属性：值;   ">文本</选择符>

【嵌入式css样式写在当前文件中】
<style type="text/css">....</style>

【外部式css样式写在单独一个文件中，文件以.css为扩展名】
在<head>内使用<link>标签将css文件链接到HTML中。
例：<link href="   .css" rel="stylesheet" type="text/css" />
*rel="stylesheet" type="text/css"是固定写法

*因为css这三种样式是有优先级的：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在&amp;amp;amp;amp;lt;style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

【每一条css样式声明（定义）由两部分组成】形式如下：
选择器{
    样式;
     }
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

【标签选择器】
1.类选择器   .类选择器{css样式代码;}
    a.先标记要修饰的内容。
    b.使用class="类选择器名称"为标签设置一个类。
    c.设置类选择器css样式。

2.ID选择器，ID符号符前面是（#）  #ID选择器
  1与2的区别：2只能4用一次，，为一个元素设置多种样式只能用1。
3.子选择器：（>）用于选择指定标签元素的第一代子元素。
     .food>li{border:1px soild red;}
  作用：使class名为food下的子元素li加入红色实线边框。

   子选择器（child selector）仅是指它的直接后代，而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

4.包含（后代）  .first (空格)sapn{属性:值 ;}
5.通用选择器   *{属性:值;}  例：*{margin:0;padding:0;}
6.伪类选择符：给HTML中不存在的标签设置样式
例如：a:hover{   :  ;}【鼠标滑过有特效】兼容性最好。
7.分组选择符：为html中多个标签设置同一个样式。
例如：    p,span{   :  ;}

css样式具有
1.继承性：样式不仅应用于html标签元素且应用于基后代。
   标签{属性:值;}mmm border不具有继承性。
2.特殊性：权值的大小  
    浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
例如：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

3.层叠：有多个css样式存在且多个css样式具有相同的权重值时。
4.重要性：标签{  :   !important;}
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。