css学习

最新推荐文章于 2022-10-13 11:08:50 发布

-相知-

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量102

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_53121836/article/details/119030013

版权

css规则由两个部门构成：选择器以及一条或多条声明。
选择器是用于指定css样式的HTML标签，花括号内是该对象设置的具体样式
选择器：基础选择器和复合选择器
基础选择题：标签选择器、类选择器、id选择器和通配符选择器
标签选择器：选择页面中同类型标签统一设置，不能差异化设置。
类选择器：可以单独选择一个或几个标签。
类选择器举例：

.red {
        color:red;
}

调用

<li class="red">

id选择器举例

#pink{
         color:pink;
}

调用

<li id="pink">

id选择器和类选择器区别，类选择器可以多次调用，id选择器只能被调用一次、

字体属性总结

字号：font-size
字体：font-family
字体粗细：font-weight（后面不要跟单位，700=bold ，400=normal）
字体样式：font-style（正常是normal，斜体是italic）
字体连写：font（必须包含字号和字体，不能换位置）

  <style>
        /* 字体大小 标题标签特殊需要单独给定大小*/
        h2{
           font-size: 50px; 
        }
        /* 字体使用font-family来定义，各种字体之间用逗号隔开，同一个字体用引号括起来 */
        h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        /* 通配符选择器*把所有的标签全部修改样式 不需要调用 自动给所有元素使用样式*/
        *{
            color: purple;
        }
        /* id选择器：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink{
            color: pink;
        }
        /* 类选择器 */
        .red{
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green{
            width: 100px;
            height: 100px;
            background-color: green;
        }
       /* 多类名方便统一修改 */
        .box{
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h2>我是小安一</h2>
    <div id="pink">小金金</div>
    <div class="box red">红色</div> 
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>

文本属性总结

文本颜色：color（英文，十六进制，rgb形式）
文本对齐：text-align（默认左对齐）
文本缩进：text-indent（通常缩进当前大小的两个单位）
文本修饰：text-decoration（underline下划线，none取消下划线）
行高：inlet-height（控制行与行之间的距离）

 <style>
        /* 三种表示颜色 */
        /* 英语单词，十六进制，rgb代码 */
        /* 装饰文本 */
        div{
            text-decoration: underline;
            /* overline上划线 line-through删除线 none取消下划线 */
        }
        div{
            /* 只能水平对齐，或靠左靠右，不能垂直 */
            text-align: center;
        }
    div{
        /* <!-- font: font-style font-weight font-size font-family; --> */
        /* 必须保留font-size和font-family，并且不能改变顺序，否则不起效果 */
        font: italic 700 16px '黑体';
    }
</style>
</head>
<body>
    <div>一生一世爱着你</div>
</body>

<style>
        行间距line-height是通过控制上间距和下间距来控制行间距
        p{
            line-height: 30px;
        }
        p{
            /* text-indent: 20px; */
            text-indent: 2em;
            /* em是相对大小，写了2em，就是缩进当前元素两个文字大小的距离 */
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>中国蔬菜第一县</p>
</body>

css的引入方式

行内样式表（书写方便，适合单独行修改）
内部样式表（把样式写在style标签里，结构和样式部分分离）
外部样式表（完全结构和样式分离，需要引入）

快速生成HTML结构语法

1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成正常标签形式
2．如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div
3．如果有父子级关系的标签，可以用>比如ul > li就可以了
4．如果有兄弟关系的标签，用＋就可以了比如div+p
5．如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6．如果生成的div类名是有顺序的，可以用自增符号$

   <style>
        div {
            text-indent: 2em;
            text-align: center;
        }

        /* 我想把ol里面的小li选出来改为pink色 */
        ol li {
            color: pink;
        }

        .na li {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
    </ol>
    <ul class="na">
        <li>我是ul的孩子</li>
    </ul>
    <ul>
        <li>我是ul的孩子</li>
    </ul>
    <!-- 1．生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成 -->
    <div></div>
    <table></table>
    <!-- 2．如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div -->
    <div></div>
    <div></div>
    <div></div>
    <!-- 3．如果有父子级关系的标签，可以用>比如ul > li就可以了 -->
    <ul>
        <li></li>
    </ul>
    <span>
        <li></li>
    </span>
    <!-- 4．如果有兄弟关系的标签，用＋就可以了比如div+p -->
    <div></div>
    <p></p>
    <span></span>
    <p></p>
    <!-- 5．如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了 .demo p.demo*5 p#one -->
    <div class="demo"></div>
    <p class="demo"></p>
    <p class="demo"></p>
    <p class="demo"></p>
    <p class="demo"></p>
    <div id="one"></div>
    <p id="one"></p>
    <!-- 6．如果生成的div类名是有顺序的，可以用自增符号$ p.demo$*3 p{$}*5 -->
    <p class="demo1"></p>
    <p class="demo2"></p>
    <p class="demo3"></p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>

快速生成CSS样式语法
CSS基本采取简写形式即可.
1．比如w200按tab 可以生成 width: 200px;
2.比如lh26按tab 可以生成line-height: 26px;
格式化代码
右键+格式化代码
后代选择器：
元素1 元素2{样式声明}（只要元素2是元素1的后代都可以）
一层一层找元素1 元素2 元素3
子选择器
元素1>元素2(样式声明)
只选择离它最近的一个元素

    <style>
        /* 并集选择器 用逗号分隔,并集选择器可以接受任意的选择器，包括子选择器或后代选择器（最后一个不用加逗号） */
        div,
        p {
            color: violet;
        }

        /* 子选择器 元素1<元素2 */
        .nav>a {
            color: yellow;
        }
    </style>
</head>

<body>
    <div>1号</div>
    <p>2号</p>

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

在这里插入代码片

-相知-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

css规则由两个部门构成：选择器以及一条或多条声明。选择器是用于指定css样式的HTML标签，花括号内是该对象设置的具体样式选择器：基础选择器和复合选择器基础选择题：标签选择器、类选择器、id选择器和通配符选择器标签选择器：选择页面中同类型标签统一设置，不能差异化设置。类选择器：可以单独选择一个或几个标签。.red {color:red;}在标签里id选择器：font-weight字体粗细（后面不要跟单位，700=bold ，400=normal）更方便用数字字体样式font-st
复制链接

扫一扫

css学习

“相关推荐”对你有帮助么？