css_1day(选择器、样式表与字体属性)

hxgbieshuomeibanfa

已于 2022-04-08 08:51:20 修改

阅读量239

点赞数 1

分类专栏：前端基础文章标签：前端 css

于 2022-04-03 17:10:23 首次发布

本文链接：https://blog.csdn.net/weixin_63997211/article/details/123939169

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css学习笔记，方便查看备用

选择器

标签选择器

<style>
    h1 {
        color: rgb(255, 0, 0)
    }
</style>

类选择器

在标签中加入class=""

    <style>
        .red {
            color : red
        }
        .h-xiaogang {
            color: green
        }
    </style>
<body>
    <ul>
        <li class="red">huxiaogang</li>
        <li class="h-xiaogang">hurunjie</li>
    </ul>
</body>

id选择器

id选择器只能被调用一次

    <style>
        #red{
            color: red;
        }
    </style>

<body>
    <div id="red">id选择器只能被调用一次</div>

</body>

统配符选择器

会把所有的标签变成红色可以清楚所有标签的内外边距

    <style>
        *{
            color: red;

        }
    </style>
</head>
<body>
    <ul>
        <li class="red">会把所有的标签变成红色</li>
        <li class="h-xiaogang">可以清除所有标签的内外边距</li>
    </ul>
</body>

字体属性

family：字体 size：大小 weight：粗细 sytle:形式（加租倾斜）


    <style>
        h1 {
            font-family: "Microsoft YaHei";
        }
        P {
            font-size: 20px;
        }
        /* <!-- 谷歌浏览器默认的大小时16px --> */
        p {
            font-weight: 100;   
        }
        p {
            font-style: italic;
        }
    </style>

复合属性

可以写在一起有顺序 font :font-style font-weight font-size/height font-family 不需要的设置可以省略，但是必需保留size和family

    <style>
        p {
            font: italic 100 16px "microsoft yahei";
        }
    </style>

字体属性：下划线，行间距，首行缩进

    <style>
        div {
            text-decoration: underline;  
            /* 下划线 */
        }
        div {
            text-indent: 2em;
            /* 首行缩进  一个em就是一个当前文字的大小*/ 
        }
        div{
            line-height: 26px
            /* 行间距 */
        }

    </style>

样式表

外部样式表

需要创建一个css文件然后将东西插入

<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>内部样式表，行内样式表 外部样式表</title>
    <link rel="stylesheet" href="css_3.1.css">
</head>
<body>

行内样式表

    <h1>《面朝大海，春暖花开》</h1>
    <p style="color:aqua">从明天起，做一个幸福的人</p>

选择器

后代选择器


    <style>
        ol li {
        color: pink;
    }
    </style>



<body>
    <ol>
        <li>我是ol的孩子</ol></li>
    </ol>    
    <ul>
        <li>我是ul的孩子</li>
    </ul>
</body>

子选择器

    <style>
        .nav > a {
            color: antiquewhite;
        }
    </style>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a>我是孙子</a>
        </p>
    </div>

并集选择器


    <style>
        p1,div,ol{
            color: pink;
        }
    </style>

<body>
    <p1> 宋t </p1>
    <div>wxhn</div>
    <ul>
        <ol>你说是不是呢</ol>
    </ul>
</body>
</html>

链接伪类选择器

改变链接的样式

    <style>
        a:link{
            color:red
        }
        /* 选择所有未被访问的链接 */
        h2:visited{
            color:green
        }
        /* 选择所有已被访问的链接 */
        h3:hover{
            color:orange
        }
        /* 选择鼠标指针位于其上的链接 */
        h4:active{
            color:blue
        }
        /* 选择活动链接（鼠标按下未tan'qi */
    </style>

为了确保生效按照LVHA顺序写

在实际开发中的写法，先给a标签设计一个样式，再给链接设计一个样式

    <style>
        a {
            color: hover;
        }
        a:hover{
            color:red;
        }
    </style>

focus伪类选择器

获取光标所在的表单元素

光标在哪个表单里就获取哪个

    <style>
        input:focus{
            background-color: red;
        }
    </style>

hxgbieshuomeibanfa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录