选择器css部分属性总结

最新推荐文章于 2024-07-16 15:41:31 发布

一份蛋炒饭

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量72

点赞数

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/weixin_52019215/article/details/114022156

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体 */
        
        body {
            /* 谷歌浏览器默认字体尺寸16px  不同浏览器默认的字体尺寸不同 */
            font-size: 16px;
            /* 字体名包含空格、汉字和特殊符号(如# ￥)的时候需要加双引号 */
            font-family: Arial, "Microsoft Yahei", "微软雅黑", "黑体";
            /* Unicode编码 */
            /* 宋体 */
            font-family: \588B\4F53;
            /* 字体粗细  400-900*/
            /* 正常 */
            font-weight: normal;
            font-weight: 400;
            /* 粗体 */
            font-weight: bold;
            font-weight: 700;
            /* 字体风格 */
            /* 正常 */
            font-style: normal;
            /* 斜体 */
            font-style: italic;
            /* font缩写  顺序不可变*/
            /* font-size 和 font-family必须保留 */
            /* font:font-style font-weight font-size/line-height font-family */
            font: italic 700 16px Arial;
            /* css外观属性 */
            /* 可以设置文字水平对齐方式 */
            text-align: center;
            /* 段落首行缩进 */
            text-indent: 2em;
            /* 去掉下划线underline */
            text-decoration: none;
        }
        /* 交集选择器 */
        /* 既有p标签又有.red属性 */
        
        p.red {
            color: red;
        }
        /* 链接伪类选择器 */
        /* 未访问过的链接的状态 正常状态 */
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 已经访问过的 */
        
        a:visited {
            color: orange;
        }
        /* 鼠标经过时候 */
        
        a:hover {
            color: red;
        }
        /* 当点击的时候 */
        
        a:active {
            color: green;
        }
        /* 伪类选择器按照a:link a:visited a:hover a:active 的顺序写 lv hao */
        
        body {
            /* 块转行 */
            display: inline;
            /* 行转块 */
            display: block;
            /* 转换行内块 */
            display: inline-block;
            /* 背景 */
            /* transparent透明 */
            /* 背景颜色 */
            background-color: transparent;
            /* 背景图片 */
            background-image: url(images/l.jpg);
            background-image: none;
            /* 背景平铺 */
            background-repeat: repeat;
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            /* 背景位置 
            1 必须指定background-image
            2 如果指定一个方位，另一个默认居中
            3 如果指定一个数值，那该数值用于x坐标，另一个默认y*/
            background-position: 0 auto;
            /* 背景附着 */
            /* 背景固定 */
            background-attachment: fixed;
            /* 背景滚动 默认 */
            background-attachment: scroll;
            /* 背景简写 */
            background: transparent url() no-repeat scroll 10px 10px;
            /* 背景透明  alpha */
            background: rgba(0, 0, 0, .3);
            /* css继承性
            子标签继承父标签样式 可继承的样式：text font line开头的 
            css优先级
            选择器相同则执行层叠性
            不同则执行优先级
            优先级计算格式：
            继承或者*              0,0,0,0
            每个元素(标签选择器)    0,0,0,1
            类 伪类                0,0,1,0
            id                     0,1,0,0
            行内样式styke=""       1,0,0,0
            !important             无穷大
            
            权重叠加
            div ul li           0,0,0,3
            .nav ul li          0,0,1,2
            a:hover             0,0,1,1
            .nav a              0,0,1,1*/
            /* 边框 */
            border-width: 2px;
            /* 实线 */
            border-style: solid;
            /* 无边框 */
            border-style: none;
            /* 虚线 */
            border-style: dashed;
            /* 点线 */
            border-style: dotted;
            border-color: red;
            border: 1px solid red;
            border-top: 1px solid #ccc;
        }
        /* 表格的细线边框 */
        /* table,
        th,
        td {
            border: 1px solid deeppink;
            /* 让我们表格 单元格 th 合并相邻的边框 */
        /* border-collapse: collapse;
    } */
        /* padding内边距会撑大盒子 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
        
        p {
            height: 20px;
            background-color: #666;
            /* div里面的p标签没有给宽度，则对p标签设置内边距时不会撑开盒子 */
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <p class="red"></p>
    <a href="">三菱欧蓝德</a>
    <!--  块级元素  <h1>-<h6> <p> <div> <ul> <ol> <li>    block-level
        1 独自占一行
        2 高度 宽度 外边距 内边距可控
        3 宽度默认是浏览器宽度
        4 是一个容器及盒子 里面可以放行内元素或者块级元素
    注意：
        。只有文字才能组成段落 因此p h1-h6 dt里面不能放块级元素 (p里面不能放div)  -->
    <!-- 行内元素 inline-level
        1 一行显示多个
        2 高 宽设置无效
        3 默认宽度是本身内容宽度
        4 行内元素里面放文本或者其他行内元素
    注意：特殊情况下a里面可放块级元素，放之前最好转换成块级元素 -->
    <!-- 行内块元素 inline-block  img input td-->
    <div>
        <p>dadada</p>
    </div>

</body>

</html>

一份蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器css部分属性总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫