【CSS总结】

最新推荐文章于 2024-07-22 11:03:23 发布

要变得优秀呀

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量113

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_66166205/article/details/125251543

版权

CSS简介

什么是CSS

CSS 指级联样式表Cascading Style Sheets)
HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 语法

css样式规则

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
在这里插入图片描述
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：

选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
例子：

body {
    background-color:#d0e4fe;//背景颜色
}
h1 {
    color:orange;//h1标题颜色
    text-align:center;//居中
}
p {
    font-family:"Times New Roman";
    font-size:20px;
}

选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

id选择器

选择器	示例	示例说明
#id	#firstname	选择所有id=“firstname”的元素

例如：

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

即选择使用id=‘sky’的元素
这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色，如下所示的页面，蓝色的天空这几个字就将会是蓝色的。

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

提示 HTML 中元素的id值必须唯一，所以，id 选择器适用范围只有一个元素。

class选择器

选择器	示例	示例说明
.class	.intro	选择所有class="intro"的元素

例如：

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

即选择所有class="center"、"large"、"red"的元素
以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
如下所示的页面：

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

==提示：==由上例可看出，元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

部分其他选择器

选择器	示例	示例说明
*	*	选择所有元素(`在CSS2中适用`)
element	p	选择所有< p >元素
element,element	div,p	选择所有< p >元素和< div >元素
element element	div p	选择< div >元素中的所有< p >元素

CSS 如何生效

上面我们学习了如何定义 CSS样式，那么如何让这些规则对页面生效？
我们一般有三种方法：外部样式表，内部样式表，内联样式。

外部样式表

步骤一：新建如下内容的一个 HTML文件（后缀为.html)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

**步骤二：**在同一目录新建一个样式表文件mycss.css（注意后缀名为css）如下：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

提示一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。

提示引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表

我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。一般而言，只有页面的样式规则较少时可采用这种方式。

内联样式表

所谓内联样式，就是直接把样式规则直接写到要应用的元素中，如：

<h3 style="color:green;">I am a heading</h3>

内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。

联级的优先级

优先级从高到低分别是：

内联样式
内部样式表
外部样式表
浏览器缺省样式
一句话可总结为:哪个样式定义离元素的距离近，哪个就生效。

颜色

颜色值

CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）
3个双位数字的十六进制值写法，以＃符号开始。

颜色实例

color	color HEX	color RGB
黑色	#000000	rgb(0,0,0)
红色	#FF0000	rgb(255,0,0)
绿色	#00FF00	rgb(0,255,0)
蓝色	#0000FF	rgb(0,0,255)

在这里插入图片描述
例如：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<h3 style="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
新建如下 HTML 文件：

<html>
  <head>
    <link rel="stylesheet" href="./mycss.css">
  </head>
  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

再建对应的 CSS 文件如下：

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
  height: 100px;
  width: 500px;
  background-color: rgb(73, 138, 60);
  text-align: right;
}

盒子模型

盒子模型简介

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如图所示：
在这里插入图片描述
说明：

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

在这里插入图片描述

留意上图，你会发现一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距
因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度

边框与边距

CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

边框样式

样式	说明
none	默认无边框
dotted	定义一个点线边框
dashed	定义一个虚线边框
solid	定义一个实线框
double:	定义两个边框。两个边框的宽度和 border-width 的值相同

就像这样：
在这里插入图片描述

尝试例子：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

CSS Position(定位)

position 属性指定了元素的定位类型。
position 属性的五个值：

static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

relative 定位

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

CSS 溢出

溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：

img
{
    float:right;
}

彼此相邻的浮动元素:
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

清除浮动 - 使用 clear:
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：

.text_line
{
    clear:both;
}

CSS 图像透明/不透明

创造一个透明图像：
CSS3中属性的透明度是 opacity
首先，我们将向您展示如何用CSS创建一个透明图像。
正常的图像: 在这里插入图片描述
相同的图像带有透明度：

CSS如下：

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

图像的透明度 - 悬停效果

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

对齐

元素居中对齐

要水平居中对齐一个元素(如 < div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

CSS组合选择器

组合选择器说明了两个选择器之间的关系。
CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 < p> 元素插入到 < div> 元素中:

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

以下实例选择了< div>元素中所有直接子元素 < p> ：

div>p
{
  background-color:yellow;
}

CSS 伪类(Pseudo-classes)

语法:

selector:pseudo-class {property:value;}

以下是常用的伪类/伪元素的简单使用：

a:link {color:#FF0000;}     /* 未访问的链接 */
a:visited {color:#00FF00;}  /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;}   /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;}   /* 段落的第一个字超大 */

h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */