CSS选择器

来源：互联网发布：apk软件官方下载编辑：程序博客网时间：2024/05/17 02:58

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css入门</title>    <link rel="stylesheet" href="../../css/first.css"/><style type="text/css">    #price1{            color: red;            font-size: 40px;        }

    /*标签选择器  作用于当前页面的所有匹配标签*/    li{        color: blue;    }    /*类选择器   作用于当前页面class=red的标签*/    .red{        color: red;    }    /*ID选择器  id在当前页面具有唯一性*/    #firstLine{        color: yellow;    }
    p{    /*前面是字体族名称  最后一个是类族名称      浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列*/    font-family: "宋体","仿宋",sans-serif;    /*bold 加粗  bolder 深度加粗  lighter 细体   100~900*/    font-weight: lighter;    /*字体大小  取值：具体的px值 百分比（默认字体大小16px）*/    font-size: 40px;    /*字体显示样式  italic斜体*/    font-style: italic;    /*字体颜色*/    color: red;    /*字体透明度  0：全透明 1:全显*/    opacity: 0.5;    }
    p{    color: blue;    font-size: 20px;    /*行号  单行字体占用的高度 px %*/    line-height: 150%;    /*对齐方式 justify：两端对齐 left=start：左对齐 right=end：右对齐  center：居中*/    text-align: justify;    /*控制字符间距*/    letter-spacing: 5px;    /*文本修饰  overline:上划线  underline:下划线  line-through:中划线*/    text-decoration: line-through;    /*overflow: auto;*/    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    /*以上三个属性共同实现溢出浏览器视窗的文本隐藏 并替换为"..."*/    /*文本阴影    x方向偏移 y方向偏移 阴影颜色*/    text-shadow: 2px 2px orange;    /*文本描边  描边宽度 描边颜色*/    -webkit-text-stroke: 1px black;    /*文本缩进*/    text-indent: 2em;    }
    div{    height: 500px;    border: 1px solid red;    background-color: gray;    background-image: url("../../img/zixia.jpg");    background-repeat: no-repeat;    background-position: 50% bottom;    /*背景图片的大小      contain：图片等比例缩放，直到宽或高填满父布局，有可能出现图片填充布局不完整      cover:   图片等比例缩放，直到较小的宽或高填满父布局，可能出现图片益处*/    background-size: cover;   }

</style>
</head><body><!--css的写法   分三类--><!--1:行内样式  只有当前标签可用，写法比较繁琐，这种写法要极力避免。--><p>    电脑 <span style="color: red;font-size: 40px">1</span> 元起</p><!--2:内部样式  写在head部分，只在当前页面可用，比行内写法要好一些。缺点：多个页面无法共用一个样式--><p>    电脑 <span id="price1">1</span> 元起</p><!--3:外部样式   推荐写法！样式可以复用。做到了样式和文件的分离。--><p>    电脑 <span id="price2">1</span> 元起</p><!--行内样式的优先级比内部样式高一些--><!--内部样式的优先级比外部样式高一些--><!--以上效果的实现符合 就近原则    覆盖掉相同的属性  -->
</body></html>

阅读全文

0 0