CSS样式随笔记录（一）

最新推荐文章于 2024-02-19 17:37:23 发布

卑微小张在线咕咕咕

最新推荐文章于 2024-02-19 17:37:23 发布

阅读量163

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_43460290/article/details/93375283

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS层叠样式表：定义如何使用HTML标签，否则标签的表示方式都是一样的，不够美观
CSS写出来有几种样式：

1、行内样式：样式直接写在标签的style属性上，只用于该标签，作用范围小。
2、内部样式表：样式定义在< style >标签里面，作用在定义的文档中。
3、外部样式表：样式定义在一个.css文件里面，通过< link >标签引入样式到html中。

ex：内部样式表：

<!DOCTYPE html>
<html>
    <head>
        <title>有样式和没有的区别</title>
    <style type="text/css">
    p{
        color: red;
        font-size: 20px;
        /*在样式内部应该这样写注释，不过这样的方法是定义的
        内部的样式的特点，只在定义的文档内有效，我们一般都是
        定义在一个.css文件里面，然后通过< link >标签引入样式
        表到html页面中，通常使用这种方式将html和样式分开
        ex：<link rel="stylesheet" type="text/css" media="screen" href="test9-11.css" />*/
    }
    </style>
    </head>
    <body>
        <p>who am i?</p>
    </body>
</html>

运行结果：
在这里插入图片描述

一个标签既有行内样式、内部样式、外部样式修饰，且都有相同的样式属性，我们需要讨论使用的顺序：
优先使用行内样式。

执行步骤是浏览器解释执行html代码的顺序，后面的样式会将前面有相同样式的属性值覆盖。
浏览器默认样式->外部样式->内部样式->行内样式。行内样式不管怎样都是最后执行的。
2,3的执行顺序由内部样式表和外部样式表在< head >中的顺序决定

对于不同的样式，我们可以通过样式选择器的三种方法选择，
首先是标签选择器，最直接

然后是类选择器，这种选择器主要用于定义公共部分的样式，不同的样式但是有相同的
样式，通过标签的class属性使用。
语法：.类名{样式}（类名不能以数字开头，尽量具有实际意义。类名要区分大小写。）
但是用的也不是很多，

ex：

<!DOCTYPE html>
<html>
    <head>
        <title>样式规则</title>
        <style type="text/css">
        .red
        {
            color: aquamarine;
            font-family: "Microsoft Yahei";
        }
        </style>
    </head>
    <body>
        <h2 class="red">xihuan77</h2>
    </body>
</html>

运行结果：

在这里插入图片描述

最后用的最多的是id选择器，因为一个网页中id的值都是唯一的。
语法：#id名{样式}（类名不能以数字开头

ex：

#crew {
    width: 960px;
    height: 1080px;
    margin: 0 auto;
    text-align: center;
}

ex：摘取一个制作的静态网页的部分：

<header>
        <div>
            <div id="title">Hello World</div>
            <div id="titlebottom">
                China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred liabilities for
                its smart car industry, Economic Information Daily reported Thursday.
            </div>
            <div id="login">
                <div>CREATE YOUR ACCOUNT</div>
                <div>IT IS ABSOLUTELY FREE</div>
                <div>
                    <input type="text" placeholder="denis@getcraftwork.com">
                    <input type="password" placeholder="Create your password">
                    <input type="submit" value="SIGN UP">
                </div>
            </div>
        </div>
    </header>

然后是对应id的css文件：

body {
    font-family: "Microsoft Yahei", sans-serif;
    font-weight: lighter;
}
 
header {
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560771244865&di=68fc4186a46ae379e3d0a339e513609f&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180605%2F2b84b61ddb52446cbb2ebb5fa40698c9.jpeg);
    color: white;
    width: 1600px;
    height: 990px;
    text-align: center;
    margin: 0 auto;
}
 
#title {
    display: inline-block;
    font-size: 64px;
    padding-top: 200px;
    width: 960px;
}
 
#titlebottom {
    display: inline-block;
    box-sizing: border-box;
    width: 960px;
    font-size: 24px;
    padding: 70px 70px 100px 70px;
}
 
#login {
    display: inline-block;
    border: 1px solid white;
    width: 960px;
    height: 240px;
}
 
#login div:first-child {
    font-size: 20px;
    transform: scale(1.2, 1);
    padding-top: 60px;
    padding-bottom: 15px;
}
 
#login div:nth-child(2) {
    font-size: 1em;
    transform: scale(1.2, 1);
    color: rgb(90, 90, 90);
}
 
#login div input:first-child {
    width: 300px;
    height: 50px;
    border: none;
}
 
#login div input:nth-child(2) {
    width: 300px;
    height: 50px;
    border: none;
}
 
#login div input:nth-child(3) {
    width: 120px;
    height: 50px;
    background-color: #000000;
    color: #ffffff;
    border: none;
}

运行效果：
在这里插入图片描述

优先使用行内样式（优先级最高）。最先执行的优先级最弱，因为它会被覆盖掉。

执行顺序是：先应用默认样式，而后标签样式，而后类样式，而后id样式，

最后选择行内样式。优先级顺序与执行顺序相反（有相同属性名称的时候才有用）。

标签的这些样式可以被继承：
color、font-size、font-style、font-weight、font、line-height、list-style-image、
text-align

因为html本身是一种嵌套结构，标签可以套标签，有父标签和子标签之分。

后代选择器的顺序：
浏览器默认的样式->继承样式->标签样式->后代选择器（优先应用最近的父容器，以此类推）
->类样式->后代选择器（优先应用最近的父容器，以此类推）->ID样式->后代选择器（优先应用最近的父容器，以此类推）
->行内样式->子元素选择器->只能用于某元素的子元素，相比后代选择器范围缩小了。

Html相同属性的执行顺序（与优先级相反）
浏览器默认的样式->继承样式->标签样式->类样式->ID样式->行内样式

卑微小张在线咕咕咕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS样式随笔记录（一）

CSS层叠样式表：定义如何使用HTML标签，否则标签的表示方式都是一样的，不够美观CSS写出来有几种样式：1、行内样式：样式直接写在标签的style属性上，只用于该标签，作用范围小。2、内部样式表：样式定义在< style >标签里面，作用在定义的文档中。3、外部样式表：样式定义在一个.css文件里面，通过< link >标签引入样式到html中。ex：内部样式表...
复制链接

扫一扫