CSS课程小结

最新推荐文章于 2023-06-22 21:35:10 发布

混子王江江

最新推荐文章于 2023-06-22 21:35:10 发布

阅读量135

点赞数 3

分类专栏： WEB 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_52215423/article/details/124829266

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

#CSS介绍

CSS是Cascading Style Sheets的缩写，意思是级联样式表。HTML是网页的结构，而CSS则为这些结构进行修饰。

#CSS语法
*结构：
一条CSS语句由选择器和{ }内包含的其他的声明构成。
说明：

1、选择器就是你想要修饰的对象
2、每条属性由一个属性和一个值组成，不同声明之间用**;** 分隔。
3、属性和属性值之间用**：**分隔开。

*选择器类别：

1、id选择器：用法上一般是唯一的，在选择器前加"#“进行选择。
2、class选择器：也叫类选择器，元素的class值可以多个，也可以重复，在选择器前加上”."进行使用。
3、元素选择器：直接选择元素名。

/*元素选择器*/
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

/*id选择器*/
#sky{
  color: blue;
}

/*class选择器*/
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

#CSS如何生效
1、外部样式表：在CSS文件中写完后，从HTML文件中使用link元素进行引入。例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--下面这句话进行引入外部样式表-->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
</body>
</html>

说明：

引入外部样式表是目前的主流，将CSS文件和HTML文件分开，结构清晰。在一个就是可复用性高。

2、内部样式表：在head里面的style元素内进行样式的定义。注：一般是样式修饰要求比较少的会选择这种情况。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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>
</body>
</html>

3、内联样式：直接把样式写在元素中。
例如：

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

注:内联样式极其不灵活，少用或不用。

4、三种样式的优先级：

内联样式>内部样式表&外部样式表(看哪一个出现的位置靠后，谁优先，就是最后渲染有效)>浏览器默认样式。

#颜色，尺寸，对齐
##颜色：
在设置颜色中可以采用颜色名称或者颜色RGB16进制值进行设置
##尺寸：
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
##对齐:
对于元素中的文本：
可以简单设置为text-align,可选属性值有：
left，center，right。

#盒子模型在这里插入图片描述

1、content:;盒子的内容，如文本、图片等
2、 padding：内边距 (内容区和边框的距离)
3、 border：边框
4、margin:外边距(外边距，边框以外与其它元素的区域)

注意：一个元素真正占据的宽度应为：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距。

#边框和边距

注意：无论是边框、内边距或者是外边距，他们都有上下左右四个方向，并且默认的顺序是上右下左的逆时针顺序。

***在没有指定位置下：
1、只有一个一个元素值：则上右下左均一致。
2、两个元素值：第一个元素值对应上下，第二个对应左右。
3、三个元素值：第一个元素值对应上，第二个对应左右，第三个对应下边。
4、四个元素值的话：就是分别对应上右下左。

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

#定位(position)
可选值有：
1、static 静态
2、relative 相对
3、fixed 固定
4、absolute 绝对

提示：只有在设置了元素的position属性后，才可以使用top, bottom, left, right属性进行定位，否则无效。

##static静态定位

这是元素的默认定位方式，无论设置与否，元素按照HTML出现的顺序进行布局。

##relative相对定位

相对于静态位置的位置进行偏移。

##fixed固定定位

这会使得元素固定不动，即使是拖动浏览器的滚动条。
其位置仍然由top，bottom，left，right属性确定，相对于视口进行定位。

##absolute

该设置仍然为相对定位，只不过是相对于最近的设置了定位属性(非static)的元素进行偏移。

#溢出
当元素内容超过指定区域，可以通过overflow属性处理这些溢出的部分。可选值有：

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

#浮动
我们可以通过浮动使得元素脱离文档流，这时元素会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。

注：若希望元素在设置浮动元素后面在其下方显示需要使用clear:both样式进行清除。

#不透明度
通过opacity元素对元素设置不透明度(一般用于图片)，可选值在[0.0~1.0]之间，值越低，透明度越高。

#组合选择器(由元素选择器，id选择器，class选择器组成)

##后代选择器
语法：以空格为分隔，如：.haha p

代表在div元素内有.haha这种类的所有p元素。

##子选择器：
也叫做直接后代选择器，以>作为分隔，如：.haha>p

代表在有.haha类的元素内的直接

元素。

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

说明：则.haha>p只选中了div下的前两个p元素，然而span元素里的p并没有被选中。

#伪类和伪元素
作用：用于定义元素的某种特定状态或位置等。例如：

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

语法：选择器后使用 : 号，再跟上某个伪类/伪元素。
例子：

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

完结！