CSS 简记

最新推荐文章于 2024-03-19 09:54:19 发布

yibin94

最新推荐文章于 2024-03-19 09:54:19 发布

阅读量457

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/Inite/article/details/54176544

版权

HTML5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS:层叠样式表（内部样式会覆盖父级样式）
一、应用 CSS 的3种方式：
1：行内样式表
2：内部样式表
3：外部样式表
eg:
1:  <div style="color:red;font-size:50px">css</div>
2:  <div class="div1">css</div>
<head>
     <style type="text/css">
        .div1{
            color:red;
            font-size:50px;
         }  
     </style>
</head>
3: <div class="div1">css</div>
<head>
   <link rel="stylesheet" href="www.css">
</head>

www.css doc
 .div1{
    color:red;
    font-size:50px;
 }

二、CSS 选择器
1、ID 用 # 开头
2、标签名
3、类用 . 开头

三、复杂选择器
1、组合选择器
E,F:同时选择E和F这2个选择器。（可选多个）
E F:选择器E的下一代内部选择器F（有多个F则都选中）。
E>F:选择器E的直接子代选择器F（只选儿子辈）。
E~F：E后面的所有兄弟元素。
E+F：E后面的第一个兄弟元素。

2、属性选择器
<input type="checkbox" checked/>选项1
<input type="checkbox" checked/>选项2
<input type="radio"/>选项3
<input type="radio"/>选项4
1：E[attr]:标签E中含属性attr的所有元素。
  input[checked]{  //改变复选框的大小,不改变文字。
    width:20px; height:30px;
  }
2: E[attr=F]:选中E中含属性F的所有元素。
   input[type=radio]{
     width:50px; height:60px;
   }

3、伪类（根据元素的状态选取）
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接，鼠标单击未释放时的效果 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

4、伪元素（根据元素的内容选取）
1、:first-line 匹配元素的第一行
2、:first-letter 匹配元素的第一个字母

四、优先级
1、行内 > 内部 > 外部
2、ID > class > 标签
3、相同权重的后面为主（效果的覆盖）
4、!important（在属性值后面加上 !important 使其优先级最高）

五、盒子模型