其他分享
首页 > 其他分享> > 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