css总结

最新推荐文章于 2024-09-25 10:17:48 发布

一条笔直的路

最新推荐文章于 2024-09-25 10:17:48 发布

阅读量126

点赞数 2

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/weixin_47318888/article/details/114631949

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、css简介

CSS是级联样式表（Cascading Style Sheets）的缩写。定义了HTML元素如何显示，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等。样式表通常存储在 CSS 文件中。

二、css语法

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

css规则

选择器通常是需要改变样式的 HTML 元素（如上图的选择器就是h1）。
每条声明由一个属性和一个值组成。无论是一条还是多条声明需要用{}来包裹。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器

选择器除了有上图所用的元素选择器外，还有id选择器和class选择器。其中class选择器使用非常普遍。

1.id选择器

id选择器可以为标有特定id的元素指定样式。id选择器前有"#"号。
注意：id选择器只能在一个元素中使用，即元素的id值唯一。

#sky{
  text-align:center;
  color: blue;
}

2.class选择器

class选择器可以为一组元素指定样式，即class可以在多个元素中使用。class选择器前有“.”号。

.sky{
text-align:center;
  color: blue;
}

三、创建样式表

1.外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择，使得结构清晰，内容得以复用。在项目目录下建一个文件夹如css专门存放样式表文件，其文件后缀为.css。在HTML文件中，通过<link>标签来连接样式表。

<head>
<link rel="stylesheet"  href="mycss.css">
</head>

2.内部样式表

将样式放入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;
    }
    
  </style>
</head>
 <body>
   <h1>我是红色的的</h1>
 </body>
</html>

3.内联样式

直接将样式写到要应用的元素中就是内联样式，如：

<h3 style="color:green;">我是绿色</h3>

内联样式十分不灵活，实际应用少见。

4.样式表优先级

一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

四、颜色、尺寸、对齐

1.颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

 h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

2.尺寸

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

.example-1 {
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}

css尺寸属性：

属性	描述
height	设置元素的高度。
line-height	设置行高度。
max-height	设置元素的最大高度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

3.对齐

文本对齐，可以使用text-align:属性left, center, right，比如：

.example-1 {
  text-align: center;
}

五、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：

在这里插入图片描述

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

.box1 {
  height: 200px;
  width: 200px;
  background-color:#615200;
  color: aliceblue;
  border: 10px solid red;
  padding: 25px;
  margin: 25px;
}

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

六、边框与边距

1.边框

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

border设置:

border：设置默认边框的样式
border-bottom：设置边框底部的样式
border-radius：设置圆角边框的样式
border-left：设置边框左边的样式

实例：

.example {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}

2.边距

内边距设置：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

注意：简写时的顺序为上，右，下，左，或记为顺时针方向。

七、定位

position 属性对元素进行定位，position 属性的五个值：

static 静态
relative 相对
fixed 固定
absolute 绝对
sticky 粘性
元素可以使用top, bottom, left, right属性定位，但要先设定position属性，否则定位无效。

1.static 静态

设置为静态定位position: static;，这是元素的默认定位方式，静态定位的元素不会受到 top, bottom, left, right影响。

2.relative 相对

设置为相对定位position: relative;，相对定位元素的定位是相对其静态（正常）位置。
实例：

.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
}

3.fixed 固定

设置为固定定位position: fixed;，固定定位元素的定位是相对视口（就是浏览器的屏幕可见区域）位置，即元素固定不动（即使你上下左右拖动浏览器的滚动条），实例：

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;position: fixed;
    bottom: 40px;
    right: 10px;
    padding: 6px 24px;
    border-radius: 4px;
}

4.absolute 绝对

设置为绝对定位position: absolute;，绝对定位的元素的位置相对于最近的设置了定位属性的父元素，如果元素没有已定位的父元素，那么它的位置相对于<body>。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.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);
}
</style>
</head>

<body>
<div class="example-relative">这是父元素，有 relative 定位属性
  <div class="example-absolute">
    这是子元素，有 absolute 定位属性
  </div>
</div>
</body>

</html>

5.sticky 粘性

设置为粘性定位position:sticky;，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

八、溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

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

九、浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像和文本的布局，在布局时一样非常有用。

img
{
    float:right;
}

一个浮动元素水平方向浮动，将会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。
使用 clear清除浮动

.text_line
{
    clear:both;
}

十、透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
语法：

.opacity-2 {
      opacity: 0.2;
    }

十一、组合选择器

将元素、id 和 class 进行组合，以得到简洁精确的选择。

1.后代选择器

以空格作为分隔，以下实例选取所有

元素插入到 <div>元素中:

<html>
<head>
  <style>
    div p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div >
    <p>Paragraph 1 in the div</p>
    <span>
        <p>Paragraph 2 in the div.</p>
    </span>
  </div>
  <p>Paragraph 3 Not in a div </p>
</body>
</html>

2.子选择器

子选择器，以>作为分隔，元素选择器只能选择作为某元素子元素的元素。如：.haha > p 代表在有.haha类的元素内的直接<p>元素。代码：

<html>
<head>
  <style>
    .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>

十二、伪类和伪元素

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

语法：

选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
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); } /* 在每个一级标题后插入该图片 */