标签：02 color 元素样式 HTML 选择器 CSS 属性

1.CSS

1.简介

1.是什么

Cascading Style sheets,层叠样式表

CSS可以用来为网页创建样式表，通过样式表可以对网页进行装饰。所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的，CSS可以分别为网页的各个层次设置样式。

2.能做什么

修饰美化html网页；

外部样式表可以提高代码复用性从而提高工作效率；

html内容与样式表现分离，便于后期维护。

3.为什么需要CSS

HTML标签属性

有些外观标签属性做不到，链接样式，行距等
HTML标签属性不能实现代码和设计的分离
对于网站的整体风格设计会出现代码冗余

CSS样式

能实现HTML标签属性的所有功能
能实现代码和设计的分离，方便团队开发
适用于网站的整体风格设计

4.基础语法

不能独立使用，必须结合HTML使用

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是用来选择需要改变样式的HTML元素。

每条声明由一个属性和一个值组成。

/* 这是注释 */
选择器 {
      样式名称1: 样式值1;
      样式名称2: 样式值2;
}

注意事项：

请使用花括号来包围声明

如果值为若干单词，则要给值加引号

多个声明之间使用分号;分开

CSS对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

5.注释

注释用于解释代码，以后在您编辑源代码时可能会有所帮助。

浏览器会忽略注释。

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束。

/* 这是一条单行注释 */
/* 
	这是一条多行的注释 
*/ 
p {
  color: red; /* 把文本设置为红色 */
}

2.CSS使用方式

1.行内样式

把CSS样式嵌入到html标签当中，类似属性的用法，标签直接作为选择器使用。

 <p style="color:blue; font-size:50px">This is my HTML page. </p>

2.内部样式

在head标签中使用style标签引入CSS

<style type=“text/css”> //告诉浏览器使用css解析器去解析
	p {
		color:red;
		font-size:50px;
	}
</style>

3.外部样式

将内部样式单独放到一个XXX.css文件中，HTML页面通过<link>标签将.css文件引入到当前页面中

link格式：<link href="xxx.css文件路径" rel="stylesheet" type="text/css"/>

用法同内部样式

/* css文件 */
p {
	color: blue;
}

#p2 {
	color: yellow;
}

html页面如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外联样式</title>
        <!-- 
			rel:代表当前页面与href所指定文档的关系
            type:文件类型，告诉浏览器使用css解析器去解析
            href:css文件地址
		-->
		<link rel="stylesheet" type="text/css" href="../css/test.css" />
	</head>
	<body>
		<p>外联样式演示1</p>
		<p id="p2">外联样式演示2</p>
	</body>
</html>

4.CSS样式优先级

当一个HTML元素有一个以上的样式时，作用优先级如下：

在一个HTML元素内，行内样式优先级最高，会覆盖内部样式、外部样式及浏览器默认样式；
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高；
浏览器默认样式优先级最低。

3.CSS选择器

简单选择器

1.元素选择器

元素选择器：根据元素名称来选择HTML元素。

<style type="text/css">
    /* 元素选择器 */
    h1 {
        color: blue;
    }
    
    p {
        color: red; 
    }
</style> 

<h1>hello</h1>	
<p>hello html</p>
<p>hello css</p>

2.ID选择器

ID选择器：使用HTML的ID属性来选择一个特定的元素。

ID在HTML中是唯一的，用来表示表示特定的元素，不能以数字开头

<style type="text/css">
    /* 元素选择器 */
    h1 {
        color: blue;
    }
    
    p {
        color: red; 
    }
    
    /* ID选择器 */
    #p1 {
        text-align: center;
    }
</style> 

<h1 >hello</h1>	
<p id="p1">hello html</p>
<p>hello css</p>

3.类选择器

类选择器：选择具有特定class属性的HTML元素。

类选择器不能以数字开头。

<style>
    /* 元素选择器 */
    h1 {
        color: blue;
    }

    p {
        color: red;
    }

    /* ID选择器 */
    #p1 {
        text-align: center;
    }

    /* 类选择器 */
    .italic {
        font-style: italic;
    }

    .deco {
        text-decoration: underline;
    }
</style>

<h1 class="italic">hello</h1>
<p id="p1">hello html</p>
<!-- class属性设置多个值，可以实现样式的叠加 -->
<p class="italic deco">hello css</p>

4.分组选择器

可以将不同选择器放在同一组，统一设置样式。

<style>
    /* 元素选择器 */
    h1 {
        color: blue;
    }

    p {
        color: red;
    }

    /* ID选择器 */
    #p1 {
        text-align: center;
    }

    /* 类选择器 */
    .italic {
        font-style: italic;
    }

    /* 分组选择器 */
    h1, #p1 {
        text-decoration: underline;
    }
</style>

<h1 class="italic">hello</h1>
<p id="p1">hello html</p>
<!-- class属性设置多个值，可以实现样式的叠加 -->
<p class="italic deco">hello css</p>

5.通用选择器

选择页面上的所有的 HTML 元素

<style>
    /* 通用选择器 */
    * {
       background-color: bisque;
    }
    /* 元素选择器 */
    h1 {
        color: blue;
    }

    p {
        color: red;
    }

    /* ID选择器 */
    #p1 {
        text-align: center;
    }

    /* 类选择器 */
    .italic {
        font-style: italic;
    }

    /* 分组选择器 */
    h1, #p1 {
        text-decoration: underline;
    }
</style>

<h1 class="italic">hello</h1>
<p id="p1">hello html</p>
<!-- class属性设置多个值，可以实现样式的叠加 -->
<p class="italic deco">hello css</p>

组合选择器

6.后代选择器

后代选择器：匹配作为指定元素后代的所有元素。

<style>
    h1 {
        text-align: center;
    }

    /* 后代选择器 */
    div h3 

    /*div p {
        color: blue;
    }*/
    
    div li p {
        color: blue;
    }
</style>

<div>
    <h1>1111111111111111111111111</h1>
    <p>22222222222222222222222</p>
    <h3>3333333333333333333333333333</h3>
    <ol>
        <li>
            <p>4444444444444444</p>
        </li>
        <li>
            <p>5555555555555555555555</p>
        </li>
        <li>
            <p>66666666666666666666666</p>
        </li>
    </ol>
</div>

7.子选择器

子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素。

<style>
    h1 {
        text-align: center;
    }

    /* 后代选择器 */
    div h3 {
        color: blue;
    }
    /*div p {
        color: blue;
    }*/
    /* 子选择器 */
    div>p {
        color: blue;
    }
</style>

<div>
    <h1>1111111111111111111111111</h1>
    <p>22222222222222222222222</p>
    <h3>3333333333333333333333333333</h3>
    <ol>
        <li>
            <p>4444444444444444</p>
        </li>
        <li>
            <p>5555555555555555555555</p>
        </li>
        <li>
            <p>66666666666666666666666</p>
        </li>
    </ol>
</div>

8.伪类选择器

伪类选择器：属于类选择器中的一种，根据特定状态选取元素。

语法：

selector:鼠标行为 {
    样式名:样式值;
}

鼠标行为：

:link 鼠标点击前
:visited 鼠标点击后
:hover 鼠标悬停时
:active 鼠标点击时

注意：

冒号和后面的鼠标行为，没有任何空格，必须连接在一起；
四个伪类选择器必须按照以上顺序书写，否则在浏览器中部分样式不能实现；
伪类选择器全部一起使用的情况，主要应用在超链接上，偶尔也会独立使用在其他标签上面。
伪类选择器也可以应用在其他元素上，但是只能实现active激活瞬间和hover鼠标悬停效果。

<style>
    a:link {
        color: red;
    }

    a:visited {
        color: gray;
    }

    a:hover {
        color: yellow;
    }

    a:active {
        color: skyblue;
    }
    
    div {
        background-color: skyblue;
        width: 100px;
        height: 100px;
    }

    div:hover {
        background-color: red;
    }

    div:active {
        width: 200px;
        height: 200px;
    }
</style>

<a href="https://www.baidu.com">Code2048</a>
<div>
    Code2048
</div>

9.伪元素选择器

通过伪元素选择器，可以设置元素指定部分的样式。主要用来设置元素内文本的首字母，首行的样式或是在元素内容之前或之后插入其他内容。

语法：
selector::伪元素选择器 {
    样式名:样式值;
}
分类：

::first-letter 首字母

::first-line 首行

::before 之后插入内容

::after 之前插入内容

::selection 修改选中文本的样式

注意：

::before和::after需要配合content使用

selection伪元素选择器只支持以下几个样式声明：color，background，cursor

<style>
    div {
        width: 100px;
        background-color: red;
    }

    div::first-letter {
        font-size: 40px;
    }

    div::first-line {
        color: gray;
    }

    div::before {
        content: "123";
    }

    div::after {
        content: "456";
    }

    div::selection {
        color: yellow;
    }
</style>

<div>这是一个DIV</div>

10.属性选择器

根据元素的属性及属性值来选择元素。

格式为：

[attr]: 查找带有attr属性的所有元素；

[attr="value"]:查找带有attr属性，并且属性值为value的元素；

[attr*="value"]:查找带有attr属性，并且属性值包含value的元素；

[attr^="value"]:查找带有attr属性，并且属性值以value开头的元素；

[attr$="value"]:查找带有attr属性，并且属性值以value结尾的元素；

<style>
    /*
    选择所有具有title属性的元素
    */
    [title] {
        color: blue;
    }

    [title="段落"] {
        text-align: center;
    }

    /* 包含特定字符串 */
    [class*="p"] {
        background-color: red;
    }

    /* 以特定字符串开头 */
    [class^="a"] {
        border: 1px solid blue;
    }

    /* 以特定字符串结尾  */
    [class$="2"] {
        border: 1px solid black;
    }
</style>

<h1 title="标题" class="ah1">这是一级标题</h1>
<p title="段落" class="ap1">这是一个段落</p>
<p class="p2">这是一个段落</p>
<h1 class="a2">这是一个段落</h1>

4.CSS属性

1.字体属性

用于设置字体的属性，常见属性如下：

font-size：设置文本的大小

font-family：设置字体，宋体，楷体...

font-style：指定斜体文本

font-weight：字体粗细，100~900数值、normal、bold、bolder

<style>
    #p1 {
        font-size: 30px; /* 设置文本的大小 */
        font-family: "Courier New"; /* 设置字体 宋体 楷体 */
        font-style: italic; /* 用于指定斜体文本,  normal - 文字正常显示 italic - 文本以斜体显示 */
        font-weight: 100; /* 指定字体的粗细 normal bold  */
    }
</style>

<p id="p1">hello world</p>

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

font-style

font-variant

font-weight

font-size

font-family

font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

<style>
    #p2 {
        font: italic bold 20px "Consolas";
    }
</style>

<p id="p2">hello world</p>

2.文本属性

用于对文本进行设置，常见属性如下：

color：设置文本颜色，十六进制、表示颜色的英文单词；

text-indent：缩进元素中文本的首行，5px缩进5像素、20%缩进父容器宽度的百分之二十；

text-decoration：文本的装饰线

none：没有下划线

underline：下划线

overline：在句子上划线符号

line-through：删除线

text-align：文本水平对齐方式

left：左对齐

right：右对齐

center：居中

word-spacing：单词之间的间隔

line-height：设置文本的行高

text-shadow：设置阴影及模糊效果，四个取值依次是：水平偏移、垂直偏移、模糊值、阴影颜色

<style>
    #p1 {
        color: blue;
        text-decoration: underline;
        text-align: center;
        text-shadow: 20px 2px 2px red;
    }
</style>

<p id="p1">这是一个段落</p>

3.背景属性

用于对背景进行设置，常见属性如下：

background-color：设置背景色，十六进制、表示颜色的英文单词；

background-image：设置背景图片，URL('图片路径')；

background-repeat：设置背景图的平铺方向，repeat-y、repeat-x、repeat、no-repeat；

background-size：规定背景图像的尺寸；

background-position：改变图像在背景中的位置，top、bottom、left、right、center。

<style>
    body {
        background-color: red;
        background-image: url("./img/pic1.jpg");
        background-repeat: no-repeat;
        background-size: 100px 100px;
        background-attachment:fixed;
        background-position: bottom center;
    }
</style>

4.列表属性

用于对列表进行设置，常见属性如下：

list-style-type：改变列表的标识类型，none、disc（默认值）、circle、square、decimal（数字）、lower-latin（小写字母）；

list-style-image：用图像表示标识，url("图片地址")；

list-style-position：标识出现在列表项内容之外还是内部， inside、outside

<style>
    #ul1 {
        list-style: lower-latin;
    }

    #ul2 {
        list-style-image: url("img/eg_arrow.gif");
    }

    #ul3 {
        list-style-position: inside;
    }

    #ul4 {
        list-style-position: outside;
    }
</style>

<ul id="ul1">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
</ul>

<ul id="ul2">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
</ul>

<ul id="ul3">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
</ul>
<ul id="ul4">
    <li>JavaSE</li>
    <li>JavaWeb</li>
    <li>SSM</li>
</ul>

5.DIV+CSS布局

1.HTML中元素的分类

HTML中根据元素显示状态分为块级（block）元素和内联（inline）元素。

(一个自动分行一个不自动分行)

块级（block）元素：块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
- p
- h1~h6
- table
- div（没有任何含义，可以将其当成一个盒子，用来包裹其他元素）
内联（inline）元素：内联元素共处一行
- a
- img
- input
- select
- span（没有任何含义，可以将其当成一个盒子，用来包裹其他元素）

CSS中存在display属性，可以改变元素显示状态，display属性如下：

block：按块显示
inline：同行显示
none：隐藏(调查问卷中点击出现输入框的地方)

<style>
    #p1 {
        border: 1px solid blue;
        /* 将段落设置为内联元素 */
        display: inline;
    }

    #p2 {
        border: 1px solid red;
        /* 将段落设置为内联元素 */
        display: inline;
    }

    #a1 {
        border: 1px solid yellowgreen;
        /* 将超链接设置为块级元素 */
        display: block;
    }

    #a2 {
        border: 1px solid brown;
        /* 将超链接设置为块级元素 */
        display: block;
    }

    #p3 {
        /* 隐藏p3 */
        display: none;
    }
</style>

<body>
    <p id="p1">Java是最好的语言</p>
    <p id="p2">Java No.1</p>
    <a id="a1" href="https://www.baidu.com">百度</a>
    <a id="a2" href="https://www.sina.com.cn">新浪</a>
    <p id="p3">隐藏</p>
</body>

2.盒模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

对不同部分的说明：

内容 - 框的内容，其中显示文本和图像；

内边距（padding） - 清除内容周围的区域。内边距是透明的；

边框（border） - 围绕内边距和内容的边框；

外边距（margin） - 清除边界外的区域。外边距是透明的；

宽度（width） - 内容区域的宽度；

高度（height） - 内容区域的高度

元素框的最内部分是实际的内容，直接包围内容的是内边距。

内边距呈现了元素的背景。内边距的边缘是边框。背景应用于由内容和内边距、边框组成的区域。

边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

1.盒模型属性

1.宽度和高度

width：设置元素的宽度

height：设置元素的高度

2.边框

border：设置元素的边框

语法：border: 宽度样式颜色

边框样式：

none 无边框

dotted 点状边框

dashed 虚线边框

solid 实线边框

border-radius：创建圆角

语法：border-radius: 圆角半径

3.内边距

padding：内容与边框之间的距离，其规则如下：

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；

如果只提供一个，将用于全部的四边；

如果提供两个，第一个用于上、下，第二个用于左、右；

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

除此之外，还有另外四个属性设置内边距：

padding-top：设置元素的上内边距；

padding-right：设置元素的右内边距；

padding-bottom：设置元素的下内边距；

padding-left：设置元素的左内边距。

4.外边距

margin：边框与其他元素之间的距离，围绕在元素周围的空白区域，其规则如下：

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边；

如果只提供一个，将用于全部的四边；

如果提供两个，第一个用于上、下，第二个用于左、右；

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

除此之外，还有另外四个属性设置外边距：

margin-top：设置元素的上外边距；

margin-right：设置元素的右外边距；

margin-bottom：设置元素的下外边距；

margin-left：设置元素的左外边距。

5.案例

<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    #div1 {
        border: 1px solid blue;
        height: 50px;
        width: 200px;
        background-color: red;
        margin: 20px 20px;
        padding: 20px 20px;
        border-radius: 5px;
    }
</style>

<body>
    <div id="div1">hello world</div>
</body>

2.浮动属性float

普通流定位：页面元素按照HTML元素默认的盒子模型，自上而下（block元素）或从左到右（inline元素）的排列次序。

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

如下图所示，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

如下图所示，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

positioning2

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

positioning3

<style>
    .dd{width:100px; height:100px;}
    .d1{ background-color: #f00;height:120px; float: left;}
    .d2{ background-color: #0f0; float: left;}
    .d3{ background-color: #00f; float: left;}
</style>
<body>
    <div style=" width:299px;">
        <div class="dd d1"></div>
        <div class="dd d2"></div>
        <div class="dd d3"></div>	
    </div>
</body>

练习

5.在下列的 HTML 中，哪个可以添加背景颜色？

您的回答：<background>yellow</background>

正确答案：<body bgcolor="yellow">

6.请选择产生粗体字的 HTML 标签：

您的回答：<bold>

正确答案：<b>

9.如何制作电子邮件链接？

您的回答：<mail href="xxx@yyy">

正确答案：<a href="mailto:xxx@yyy">

10.如何在新窗口打开链接？

您的回答：<a href="url" target="new">

正确答案：<a href="url" target="_blank">

15.在下列的 HTML 中，哪个可以产生复选框？

您的回答：<checkbox>

正确答案：<input type="checkbox">

18.在下列的 HTML 中，哪个可以产生文本区（textarea）？

您的回答：<input type="textarea">

正确答案：<textarea>

标签：02,color,元素,样式,HTML,选择器,CSS,属性
From： https://www.cnblogs.com/AaaalexQaQ/p/17581138.html

02_CSS