imomei
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中称为选择器。
  1. 通配符选择器:通配符选择器是以*选取所有标签。
  2. 标签选择器:直接使用标签名选取该标签名的所有标签。
  3. id选择器:id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
  4. 类选择器:类选择器可以选取到标有该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. 后台选择器:两个元素用空格隔开,并且选中的是元素1所有层级的后代
  2. 子代选择器:只能选择子元素
  3. 并集选择器:并集选择器中间用逗号隔开,支持任意其他选择器,多个元素要求竖着写
  4. 伪类选择器:伪类选择器表示的是同一个标签,根据其不同的种状态,有不同的样式。例如<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上用于控制整个页面。
  1. font-family:设置文本的字体
  2. font-size:设置文本的字体大小
  3. font-style:设置文本的字体样式(正常normal、斜体italic、倾斜oblique)
  4. 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>
  • 文本相关属性:
  1. color:文本颜色。
  2. text-align:设置文本的水平对齐方式。左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。
  3. line-height:设置文本垂直的对齐方式(行高)【实现原理:行高由文字高度 + 上下空隙组成,当父类有高度,则会自动填满上下空隙,保证文字居中。】
  4. word-spacing:设置文本字间距
  5. letter-spacing:设置单词和字符间距
  6. text-transform:设置文本转换。无、首写字母大写、大写和小写。
  7. text-decoration:设置文本装饰。下划线、删除线、上划线、闪烁等。
  8. 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;
}
  • 背景属性:
  1. background-color:设置背景颜色
  2. background-image:设置背景图片
  3. background-repeat:设置背景图片重复/平铺方式
  4. background-position:设置背景图片定位
  5. background-attachment:设置背景图片是否固定或者随着页面的其余部分滚动
  6. background-size:设置背景图片大小【CSS3以前,背景图像大小由图像的实际大小决定】
  7. 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% 100%;
        /* 设置背景图片大小:如果设置了图片大小,图片会被自动拉伸或压缩到设置的大小。 */
        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)。
  1. 行内元素:行内元素就是不会独占一行的元素,行内元素不能设置宽度和高度。它的宽度和高度会随着文本的改变而该改变。内部不能填写块级元素。例如:<span> <buis> <strong> <em> <ins> <del>等;
  2. 块级元素:块级元素就是会独占一行的元素,块级元素可以设置宽度和高度,如果没有设置宽度和高度,默认父元素一样宽,高度则为0。例如:<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
  3. 行内块级元素:由于我们有的时候不仅要设置元素的宽度和高度,同时也希望元素不会独占一行,这时就出现了行内块级元素(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的三个特性是指层叠性、继承性以及优先级。
  1. 层叠性:层叠性是在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式书写的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。
  2. 继承性:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。合理使用继承可以简化代码,降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性,都可以在body中统一设置,然后影响文档中所有文本。但是,并不是所有的CSS属性都可以继承,如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性
  3. 优先级:在复杂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>

 

分类:

技术点:

前端

相关文章: