CSS选择器优先级和盒模型入门 - web前端学习

首页 > 博客列表 > CSS选择器优先级和盒模型入门

博主信息

博文 145

粉丝 7

访问量 202199

专题推荐

更多>

一、CSS选择器

常见选择器类型有：
１、标签选择器
２、属性选择器：（常用的id选择器（#id）和类选择器.class）
３、伪类选择器：

结构伪类选择器
详情请见：https://www.php.cn/blog/detail/25340.html
状态伪类选择器：
(1)、a标签状态伪类选择器器
- :link：a标签初始状态选择器
  a{}定义的样式针对所有的超链接(包括锚点)
  a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)
- :visited：点击后访问的状态
- :hover:鼠标悬停时的状态
- :active:单击时的状态
(2)、form表单中input状态选择器（常见状态选择伪类等等）
- :disabled:选择禁用状态的input标签
- :read-only:选择只读状态的input标签
- :required:选择必选项的input标签
- :focus:选择选中的input标签

４、选择器的优先级
（1）!important > 行内样式（内敛样式）> id选择器 > class选择器、属性选择器（含伪类选择器） > 标签选择器 > 通配符选择器
（2）常见的选择器的权重值（id、class、标签）

id权重100；class权重10；标签权重1；
一个id就是100，两个就200，以此类推，class（n10）、tag（n1）和id（n*100）一样
可以多id、class、tag混合使用
有id看id,没id看class,没class看标签，谁的权重大，谁优先级高
如果id权重值一样看class,如果id和class权重值都一样就看tag

二、CSS常见的属性

1、字体属性：

属性	属性值	作用
font-size	单位：像素px rem、em	设置字体大小
font-family	与系统字体一致，可以设多值	设置不同字体
font-weight	100-900数值或者normal、bold、light等	设置字体粗度
font-style	normal、italic（斜体）、oblique(认为设置的倾斜提）	设置字体样式
line-height	单位px	设置字体高度

三、盒子模型入门

1、盒子一般包含以下部分：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2、盒子内外边距的使用方式：

每个盒子的外|内边距都有四边：top right bottom left都可以单独设置宽度，值为像素，
简写方式：以padding:top right bottom left；以顺时针单独设置四条边宽度
如果上下一直，左右一直可以用两只法简写；例如 padding：10px 5px; 第一个值表示上下边宽度，第二个值表示左右边宽度
如果上下不一致，左右一直可以用三值法：padding：10px 5px 15px; 第一个值表示上下边宽度，第二个值表示左右边宽度，第三个值为底边
如果四个边都一致，可以用单值法：padding：10px；
不管三值法还是二值法，第二个值都用来表示左右边的宽度

四、相关知识点练习

1、代码：


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS选择器和状态伪类</title>
        <style>
            a:link{
                text-decoration: none;
                color:#42B983
            }
            a:visited{
                color:#8B0000;
            }
            a:active{
                background-color: #FF0000;
            }
            a:hover{
                font-size: 40px;
            }
            form{
                display: flex;
                flex-direction: column;
                width: 400px;
                /* text-align: center; */
            }
            input:disabled{
                background-color: lightgreen;
            }
            input:read-only{
                background-color: red;
            }
            input:focus{
                background-color:#DA70D6;
            }
            input:required{
                background-color: #000000;
            }
            form{
                margin:10px 15px;
                padding: 10px;
            }
            body{
                background: url(image/bg.jpg);
                background-size: 600px;
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <a href="https://www.zhongyequan.com">种业圈</a>
        <form action="">
            <div><label for="">用户名：</label><input type="text" disabled value="admin"></div>
            <div><label for="">密码:</label><input type="password" name="" id="" readonly value="123456"></div>
            <input type="text">
            <input type="text" required>
            <button>登陆</button>
        </form>
    </body>
</html>

2、运行结果图

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19