CSS(1)基本语法常用属性

顺晟科技

2021-06-30 17:04:25

140

CSS

CSS：层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS语法：CSS实例由选择器，以及一条或多条声明（属性）两部分组成。每个声明（属性）可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束，声明以大括号{}括起来。

p {
    color: red;
}

CSS注释：CSS中仅支持使用/* */进行注释

/* 我是注释内容 */

CSS引入：引入CSS样式表的方法有三种。外部样式表、内部样式表、内联样式。

<head>
    <!-- 
        引入外部样式文件（推荐）:<link>标签在写在<head>标签内。外部样式表文件不能包含任何的HTML标签。样式表应该以.css扩展名进行保存。
            href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是路径。
            type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
            rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
    -->
    <link type="text/css" rel="styleSheet" href="./study.css" />
</head>

<body>
    <!-- 行内样式：语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。 -->
    <div style="font-style:italic; color:blue;"> Hello there</div>
    <div class="a"> Hello A</div>
    <!-- 内部样式：语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。 -->
    <style>
        .a {
            color: red;
        }
    </style>
</body>

CSS选择器

CSS选择器（一）：用于选取页面上的某个标签，在CSS中称为选择器。

通配符选择器：通配符选择器是以*选取所有标签。
标签选择器：直接使用标签名选取该标签名的所有标签。
id选择器：id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
类选择器：类选择器可以选取到标有该class属性的HTML标签。类选择器以"."来定义。class选择器有别于id选择器，class属性可以在多个标签中使用。也支持一个标签中有多个class属性值（用空格隔开）。

<!-- 类可以在同个标签上有多个值 -->
<div class="a b c"> Hello A</div>
<!-- 类可以在多个标签上使用 -->
<div class="a b"> Hello B</div>

/* 通配符选择器 */
* {
    color: gray;
}

/* id选择器 */
#china {
    color: red;
}

/* 类选择器 */
.america {
    color: green;
}

/* 标签选择器 */
li {
    color: yellow;
}

CSS选择器（二）：

后台选择器：两个元素用空格隔开，并且选中的是元素1所有层级的后代
子代选择器：只能选择子元素
并集选择器：并集选择器中间用逗号隔开，支持任意其他选择器，多个元素要求竖着写
伪类选择器：伪类选择器表示的是同一个标签，根据其不同的种状态，有不同的样式。例如<a>标签有点击前和点击后两种状态。

<body>
    <ol class="haha">
        <li>1</li>
        <li>
            <p>我是儿子</p>
        </li>
        <li>3</li>
        <p>我是孙子</p>
    </ol>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <a href="http://www.baidu.com">百度一下</a>
    <input>
</body>
<style>
    /* 后台选择器：两个元素用空格隔开，并且选中的是元素1所有层级的后代 */
    .haha p {
        color: green;
    }
    /* 子代选择器：只能选择子元素 */
    .haha>p {
        color: red;
    }
    /* 并集选择器：并集选择器中间用逗号隔开，支持任意其他选择器，尽量竖着写 */
    div,
    p,
    .haha>a {
        color: pink;
    }
    /* 伪类选择器：伪类选择器表示的是同一个标签，根据其不同的种状态，有不同的样式。例如<a>标签有点击前和点击后两种状态。注意：一定先写静态伪类，后写动态伪类。
        1.静态伪类：只能用于超链接的样式。
            :link。超链接点击之前（主要是能区分是不是带有href的<a>标签）
            :visited。链接被访问过之后
        2.动态伪类：针对所有标签都适用的样式。
            :hover。悬停，鼠标放到标签上的时候
            :active。激活，鼠标点击标签，但是不松手时。
            :focus。是某个标签获得焦点时的样式（一般用于输入框获得焦点）
    */
    /* 让超链接点击之前 */
    a:link {
        color: red;
    }
    /* 让超链接点击之后 */
    a:visited {
        color: orange;
    }
    /* 鼠标悬停，放到标签上的时候 */
    a:hover {
        color: green;
    }
    /* 鼠标点击链接，但是不松手的时候（激活） */
    a:active {
        color: black;
    }
    /* 输入框获取焦点时 */
    input:focus {
        background-color: palegoldenrod;
    }

CSS常用属性

CSS度量单位：

Piexels(像素) 一个像素的大小根据用户显示器尺寸和像素密度不同而设定 .classname { margin:5px; } Points(磅) 一英镑等于一英寸的1/72，来源于印刷背景设计。 .classname { margin:5pt; } Inches(英寸) 1英寸相当于72英镑 .classname { margin:5in; } Centimeters(厘米) 1厘米比28英镑稍大一些 .classname { margin:5cm; } Millimeters(毫米) 1毫米等于1/10厘米(约为3磅) .classname { margin:5mm; } Picas Picas是另一种印刷度量单位，等于12磅 .classname { margin:5pc; } Ems 一个em等于当前字体的大小，用于描述相对尺寸 .classname { margin:5em; } Exs 也与当前字体大小有关，等于小写字母x的高度，不常用 .classname { margin:5ex; } Percent(百分比) 这个单位与em相关，它是相对单位 .classname { margin:125%; }

单位名称	说明	例子

字体相关属性：可以用CSS设置的四种主要的字体属性：family(字体族)、style(样式)、size(大小)和weight(粗细)。字体一般直接设置在body上用于控制整个页面。

font-family：设置文本的字体
font-size：设置文本的字体大小
font-style：设置文本的字体样式（正常normal、斜体italic、倾斜oblique）
font-weight：设置文本的字体粗细

<style>
    div {
        height: 50px;
        width: 50px;
    }
    #cqz {
        /* 设置文本的字体系列：楷体、宋体等（不推荐汉字，推荐使用英文）。可以设置多个，当前一个浏览器不支持的时候，用第二个，以此类推 */
        font-family: "楷体";
        /* 设置文本的字体大小：可以使用px、em、百分比。不同浏览器字体默认大小不同，所以必须设定文字默认值。h1等标题标签需要单独指定字体大小。 */
        font-size: 16px;
        /* 设置文本为斜体：默认normal是正常字体 */
        font-style: italic;
        /* 设置文本粗细：主要是normal和bold这两个值。blod为加粗。或者可以使用数字（注意不要有单位） */
        font-weight: 700;
　　　　　/* 复合写法：前两个可以省略，后两个不能省略。 */
　　　　　font: font-style font-weight font-size font-family;
    }
</style>
<body>
    <div id="cqz">曹</div>
</body>

文本相关属性：

color：文本颜色。
text-align：设置文本的水平对齐方式。左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。
line-height：设置文本垂直的对齐方式（行高）【实现原理：行高由文字高度 + 上下空隙组成，当父类有高度，则会自动填满上下空隙，保证文字居中。】
word-spacing：设置文本字间距
letter-spacing：设置单词和字符间距
text-transform：设置文本转换。无、首写字母大写、大写和小写。
text-decoration：设置文本装饰。下划线、删除线、上划线、闪烁等。
text-indent：设置首行文本缩进距离。

#cqz {
    /* 设置文本颜色（具体设置方式见下文CSS中颜色定义） */
    color: #00f0ff;
    /* 设置文本水平对齐方式：左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。 */
    text-align: center;
    /* 设置文本垂直对齐方式（设置行高，当行高与父容器的高度相同时且文字仅有一行，则文本垂直居中） */
    line-height: 100px;
    /* 设置文本装饰：下划线（underline）、删除线（line-through）、上划线（overline）、闪烁（blink）等。注意：<a>标签默认值为underline，想要去除<a>标签的下划线，就将text-decoration设置为none */
    text-decoration: line-through;
    /* 设置文本缩进：一般设置为em，代表当前文字大小的距离，是一个相对单位 */
    text-indent: 2em;

}
a {
    /* 去除<a>标签的默认下划线 */
    text-decoration: none;
}

CSS中颜色定义：W3C标准化组织定义的标准的16中颜色的名称分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还可以使用十六进制RGB：#ff0000、#00ff00、#0000ff等。还可以使用rgb函数【rgb(0,255,255)】

#cqz {
    /* RGB函数 */
    color: rgb(0, 255, 255);
    /* 十六进制RGB */
    color: #fff000;
    /* W3C标准色 */
    color: red;
}

背景属性：

background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景图片重复/平铺方式
background-position：设置背景图片定位
background-attachment：设置背景图片是否固定或者随着页面的其余部分滚动
background-size：设置背景图片大小【CSS3以前，背景图像大小由图像的实际大小决定】
background：复合写法。任意属性都可以省略。

<body>
    <div class="cqz"></div>
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
    }
    .cqz {
        margin-top: 50px;
        margin-left: 50px;
        height: 1000px;
        width: 1000px;
        border: 1px solid red;
        /* 设置背景颜色 */
        background-color: rgb(0, 0, 0);
        /* 设置背景图片：默认重复铺满盒子 */
        background-image: url("../images/123.webp");
        /* 设置背景图片重复平铺方式：
            1.repeat        垂直方向和水平方向重复。【默认】
            2.repeat-x    水平方向重复。
            3.repeat-y    垂直方向重复。
            4.no-repeat    背景图像将仅显示一次（不重复）。
        */
        background-repeat: no-repeat;
        /* 设置背景图片定位：一般建议小图标和超大图片使用背景进行设置而不是<img>
            1.需要有两个值。
            2.如果仅规定了一个关键词，那么第二个值将是center。
            3.方位名词：    top left center right（方位名词不区分设置顺序）
            4.像素/百分比： 设置像素值时，个值是x轴，第二个值是y轴。
        */
        /* background-position: center top; */
        background-position: 50% ;
        /* 设置背景图片大小：如果设置了图片大小，图片会被自动拉伸或压缩到设置的大小。 */
        background-size: 1000px 1000px;
        /* 设置背景图片是否固定或者随着页面的其余部分滚动
            1.scroll    默认值。背景图像会随着页面其余部分的滚动而移动。
            2.fixed        当页面的其余部分滚动时，背景图像不会移动。
        */
        background-attachment: fixed;
        /* 复合写法：支持省略任意属性 */
        /* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
    }
</style>

元素显示模式

元素显示模式：在CSS中，根据元素显示模式的不同元素标签被分为了两类。行内元素（inline-level）、块级元素（block-level）。

行内元素：行内元素就是不会独占一行的元素，行内元素不能设置宽度和高度。它的宽度和高度会随着文本的改变而该改变。内部不能填写块级元素。例如：<span> <buis> <strong> <em> <ins> <del>等；
块级元素：块级元素就是会独占一行的元素，块级元素可以设置宽度和高度，如果没有设置宽度和高度，默认父元素一样宽，高度则为0。例如：<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
行内块级元素：由于我们有的时候不仅要设置元素的宽度和高度，同时也希望元素不会独占一行，这时就出现了行内块级元素（inline-block）。同一行的行内块级元素会有空白间隔。例如<img><input><td>等。

转换CSS元素的显示模式：设置元素的display属性。inline（行内）、block（块级）、inline-block（行内块级）

<body>
    <span>我是行内元素，被转换成了块级元素</span>
    <div>我是块级元素，被转换成了行内元素</div>
    <img src="../images/1.webp"><img src="../images/1.webp">
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 将span转换为块级元素 */
    span {
        display: block;
        background-color: red;
        width: 400px;
        height: 200px;
    }

    /* 将div转换为行内块级元素 */
    div {
        display: inline-block;
        background-color: green;
        width: 300px;
        height: 300px;
    }

    /* 将img转换为块级元素 */
    img {
        display: block;
        width: 200px;
    }
</style>

CSS三大特性

CSS三大特性：CSS的三个特性是指层叠性、继承性以及优先级。

层叠性：层叠性是在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式书写的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。合理使用继承可以简化代码，降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性，都可以在body中统一设置，然后影响文档中所有文本。但是，并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性。
优先级：在复杂CSS样式表，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。计算优先级有如下规则：继承 < 元素选择器 < 类选择器/伪类选择器 < ID选择器 < 行内样式 < !important
1. 继承样式的权重为0：在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
2. 行内样式优先：应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
3. 就近原则：权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有更大的优先级，或者说排在最后的样式优先级更大。
4. !important命令：CSS定义了一个!important命令，该命令被赋予更大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有更大优先级。
5. 权重会叠加，但是永远不会进位。（下面讲解权重叠加问题）

<style>
div {
    height: 100px;
    /* 层叠性：该属性会被同权重CSS覆盖 */
    width: 50px;
    margin-left: 50px;
    border: black 1px solid;
    /* 继承性：该属性会被子标签继承 */
    font-size: 20px;
    /* 继承性：该属性会被子标签覆盖 */
    font-family: "楷体";
}
div {
    /* 层叠性：该属性会覆盖上方的同权重CSS */
    width: 60px;
}
p {
    font-family: "微软雅黑";
}
</style>
<body>
    <div>
        <p>曹老三</p>
    </div>
</body>

权重叠加问题：每种选择器的权重见下方表格。样式继承的权重为0，复合选择器使权重叠加，权重之间不能越界，11个类也没有id的权重大

选择器权重 0000 0000 标签选择器 0001 类选择器与伪类选择器 0010 ID选择器 0100 行内样式 1000 !important　　 +∞

<body>
    <div class="father" id="fatherid">
        <div class="child1" id="child1Id">孩子1</div>
    </div>
</body>
　　<style>
    * {
        margin: 0;
        padding: 0;
        /* 权重为0 */
        background-color: pink;
    }

    .child1 {
        /* 权重为0010 */
        background-color: red;
    }

    .father .child1 {
        /* 权重为0020 */
        background-color: black;
    }

    #fatherid .child1 {
        /* 权重为0110 */
        background-color: green;
    }

    #child1Id {
        /* 权重为0100 */
        background-color: wheat;
    }

    #fatherid #child1Id {
        /* 权重为0200 */
        background-color: greenyellow;
    }

    .child1 {
        /* 权重为+∞ */
        background-color: hotpink !important;
    }
</style>

上一篇：[web前端html5css3] 1 下一篇：[web前端html 5 CSS 3

网站建设

Css

CSS(1)基本语法常用属性

CSS

CSS选择器

CSS常用属性

元素显示模式

CSS三大特性

Css

CSS(1)基本语法 常用属性

CSS

CSS选择器

CSS常用属性

元素显示模式

CSS三大特性

CSS(1)基本语法常用属性