首页 > 其他分享> 文章详细

CSS总结

2022-07-05 17:31:07 阅读：132 来源： 互联网

标签：总结 color 元素 haha 样式 css 选择器 CSS

目录
一、什么是CSS
二、CSS语法
1、格式构成
2、选择器
3、如何生效
4、颜色、尺寸与对齐
5、盒子模型
6、边框与边距
7、定位
8、溢出
9、浮动
10、不透明度
11、组合选择器
12、伪类与伪元素

一、什么是CSS

CSS全称Cascading Style Sheets，叫做级联样式表，是用来美化之前用html构建的网页的显示内容；
如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

二、CSS语法

1、格式构成

一条css样式规则由两部分构成，选择器和{}内包含的声明（一条或多条）

注：
1、选择器为要改变样式的对象
2、每条声明由属性和值组成，其中属性之后需要跟一个冒号和一个空格再输入值，此外，一条css可包含多条声明
3、属性为想要设置成的样式属性，每个属性都有一个值。

以下为一条css样式规则，其中p为选择器，是即将被改变的对象，第一条声明会将p变成红色，第二条声明会是文本居中

p{
  color: red;
  text-align: center;
}

2、选择器

选择器用于在页面中找到/选择需要应用这个样式的对象，选择器有前面举例用到的的元素选择器还有id和class选择器；其中class选择器比较常用。

元素选择器

/*其中标签为p的元素均会调用这条css*/
p{
  color: red;
  text-align: center;
}

id选择器

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

这条规则表示，找到id为sky的元素并让他呈现蓝色，如果我们此时在body里面加入下面这一段，就可以看到这一段文字变为蓝色

<p id="sky">蓝色的天空</p>

注：HTML中，元素的id值必须唯一，也就是说不能id=“sky large”这样使用。

class选择器

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

规则的运行方式与id选择器相同，

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

从上面第三句可以看出css弥补了id元素值唯一的缺陷

3、如何生效

要使css生效我们总共有三个方法：外部样式表，内部样式表，内联样式

外部样式表

新建一个.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>

然后在同目录下
创建一个.css(mycss.css)文件，放入以下css条件规则

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

一般来说可以单独建一个css文件夹存放.css文件，与html内容分开这样可以使页面更加简洁，
不过需要注意的是，这样操作后，上面link的herf内路径因改为./css/mycss.css,即文件所在路径

内部样式表

<!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文件内，然后使用这一标签.

但应少采用这种方法

内联样式

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

这种方式采取直接将样式规则写在元素里的方式，不常用

优先级

内联样式>内部样式表或外部样式表>浏览器缺省样式

4、颜色、尺寸与对齐

颜色

在网页中颜色的显示，使用color属性，其中跟在color后面的值就是我们现在要讨论的地方，值可以直接输入颜色的英文名或者颜色RGB16进制值。
此外，为了使网站更加美观，可以去下面两个网站选择别人已经调好的配色方案
colordrop和lolcolors

<!-- 颜色名称 -->
<h3 style="background-color:Orange;">Orange</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="color:Tomato;">Hello World</h3>
<p style="color:Orange;">123.</p>

尺寸与对齐

尺寸的属性有height 和 width，其中常见的尺寸单位有：像数 px，百分比 %等。
对齐可以通过设置text-align属性为left, center, right即可

.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;
}这一整段添加到mycss.css里面

<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>

5、盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的

示意图：

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

<html>
    <head>
        <link rel="stylesheet" href="./mycss.css">
    </head>
    <body>
        <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
        <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
    </body>
</html>

.box1 {
    height: 200px;
    width: 200px;
    background-color:#615200;
    color: aliceblue;
    border: 10px solid red;
    padding: 25px;
    margin: 25px;
}
.box2 {
    height: 300px;
    width: 300px;
    background-color:#004d61;
    color: aliceblue;
    border: 10px solid blue;
    padding: 25px;
    margin: 25px;
}一整段添加到mycss.css文件中

效果图

在网页右键点击检查，然后选择上面第一个盒子模型的元素可以看到如下图示

注：width属性设置元素的宽度时，实际上只设置了其内容的宽度；其余宽度的值需要专门的元素进行设定

6、边框与边距

边框

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

如上图所示，在class选择器内定义的css样式规则中，其中border属性作用是显示一个四边的框把文字框起来，然后在其值里面可以更改丰富他的显示样式，此外还有其他几种属性形式可以改变样式

效果图：

边距

内边距(padding)设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;

简记形式：

padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

7、定位

用于定位的属性为position，该属性有以下值：
static 静态 relative 相对 fixed 固定 absolute 绝对

注：设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static（静态）

是position的默认值，元素按照正常方式显示。
position: static

relative（相对）

relative作用是使元素相对与其在静态时的位置按照设定参数进行偏移。

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

没添加css与添加后的对比：

fixd（固定）

position: fixd
将元素固定在屏幕的某个位置上，滑动滑轮元素也依旧不改变元素在屏幕上的位置
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

以上代码效果为将在页面右下角放置一个固定的按钮

absolute（绝对）

设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。所以绝对定位也是相对于父元素进行的位置固定

<!-- HTML -->
<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>
<!-- CSS -->
.example-relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
  position: absolute;
  top: 80px;
  right: 5px;
  width: 200px;
  height: 100px;
  border: 3px solid rgb(218, 73, 16);
}

其中example-relative在前面是有一条css样式规则的，现在再次定义了一条一样的，在后面的调用中，元素会显示两次定义的所有样式

样式：

8、溢出

用于溢出的属性overflow有以下值：

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

下面是一个scroll滚动的例子：

<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the
    layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
  width: 200px;
  height: 100px;
  background-color: #eee;
  overflow-y: scroll;<!--overfolw后面不加后缀，在网页中则会出现x和y两轴方向的滑动条，此处-->
}

9、浮动

浮动的属性float，会使水平方向上的某元素向左或右进行移动，其左右的元素也会重新排列；这种样式可以使图像和文本形成合理的布局。

<html>
<head>
  <style>
    .example-float-right {
      float: right;
    }
  </style>
</head>
<body>
  <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
  corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
  modi nam vero!</p>
</body>
</html>

如图，如果缩放网页，图片一直在网页右侧，而左侧文字也会根据缩放调整每段单词数

一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

10、不透明度

不透明度的属性opacity，对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。

<html>
<head>
  <style>
    img {
      width: 25%;
      border-radius: 10px;
      float: left;
      margin: 10px;
    } <!--这条css样式规则，直接作用于所有标签为img的，不用在标签里面添加img属性-->
    .opacity-2 {
      opacity: 0.2;
    }
    .opacity-5 {
      opacity: 0.5;
    }
    .opacity-10 {
      opacity: 1;
    }
  </style>
</head>
<body>
  <img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
  <img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>

11、组合选择器

之前有元素、id、class三种选择器，下面是两种以他们为组合的选择器

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。

<html>
<head>
  <style>
    .haha {
    margin-top: 100px;
    color: chocolate;
    font-size: 50px;
  }
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接< p>元素。

<html>
<head>
  <style>
    .haha {
    margin-top: 100px;
    color: chocolate;
    font-size: 50px;
  }
    .haha>p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

其中因为第三段的父代为span不是div所以他没有黄背景

如果两个选择器之间是，相隔，那么标签为haha和p的元素全部都有黄背景

12、伪类与伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。

例如：
鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
...

伪类/伪元素的语法:

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}

例子：（把下列语句放入.css文件内即可生效）

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); } / 在每个一级标题后插入该图片 */

标签：总结,color,元素,haha,样式,css,选择器,CSS
来源： https://www.cnblogs.com/Ericup/p/16447283.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9