CSS 基础

最新推荐文章于 2024-08-30 15:33:13 发布

The Straight

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量92

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_35917517/article/details/118799832

版权

定义

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

语法规则

在这里插入图片描述

选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）
属性(property)是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明(declaration），例如:

p{
font-size: 80px;
color : red ;
}

多个声明:如果要定义不止一个声明，则需要用分号将每个声明分形虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

注释格式：/* */和java一样

样式演示：

利用CSS 演示边界区间的距离、颜色效果

<div style="border: 2px solid palevioletred;">div标签</div>
<div style="border: 3px solid greenyellow;">div标签2</div>
<span style="border-bottom: 3px solid slateblue">span标签2</span>
<p align="left"><span style="border:3px solid cyan">span标签1</span></p>

style 就是CSS在控制，border

提高复用率的一种

在head里面定义，增加复用性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    div{
      border-bottom: 2px solid cyan;
    }
    span{
      border-bottom: 2px solid cyan;
    }
    </style>
</head>
<body>
<div align="center">div标签</div>
<div align="center">div标签2</div>
<div align="center">div标签2</div>
<div align="center">div标签2</div>
<div align="center">div标签2</div>
<span align="center">span标签2</span>
<p align="center"><span style="border:3px solid cyan;">span标签1</span></p>
</body>
</html>

可以看到把

 <style type="text/css">
    div{
      border-bottom: 2px solid cyan;
    }
    span{
      border-bottom: 2px solid cyan;
    }
    </style>

放入head标签的话，body的span、div内容都可以使用了。
类似于C语言函数提取
在这里插入图片描述
缺点：仍然只能在一个页面内复用，还应该继续改善

真正使用CSS文件

真正的网站开发，是需要大量的网页组成。
所以压根不可能每次都写一次，这时候就需要一个CSS文件
非常类似于import导包
新建一个CSS文件，里面就写入：

div{
    border-bottom: 2px solid cyan;
}
span{
    border-bottom: 2px solid red;
}

就行了
然后在html那边，head标签内部加入

<link rel="stylesheet" type="text/css" href="test.css">

就算是引入成功

选择器

标签名选择器

标签名选择器，可以决定哪些标签被动的使用这个样式。

标签名{
 属性：值
}

和上面所说的方法很像

<head>
  <style type="text/css">
  div{
     border: 1px solid palevioletred;
     color: blue ;
     font-size: 30px;
  }
  span{
    border-bottom: 2px solid yellow;
    color: greenyellow ;
    font-size: 20px;
  }
  </style>
</head>

id选择器

格式同上；

id选择器，可以让我们通过id属性选择性的去使用这个样式。

<style type="text/css">
      #id001{
        color: palevioletred;
        font-size: 20px;
        border-bottom: 1px yellow solid;
      }

      #id002{
        color: cornflowerblue;
        font-size: 20px;
        border-bottom: 1px yellow solid;
      }
    </style>

PS:# 是标志，不是自定义内容；标志必须是idxxx，不能单一个001

<div id="id001">div标签1</div>
<div id="id002">div标签2</div>

class选择器

.class属性值{
属性 ：值
}

使用方法几乎和id一模一样，但是！
id 就是一个标签一个特定的；但是class是一类，
1 3 5 7 9 都可以用class001标注，但是1只能用id001

组合选择器

.class001,#id001{

}

一起用，但是要注意：
这里组合的意思是：或！不是 **且 **

常用样式

颜色
字体
长度、宽度
背景颜色
div居中（相对于父容器）：margin-left: auto; margin-right: auto;
文本居中
超链接去下划线
表格细线（合并）

table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse;/*将边框合并*/
}
td,th {
border: 1px solid black; /*设置边框*/}

ul {
list-style: none;
}

The Straight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础

定义层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。语法规则选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）属性(property)是你要改
复制链接

扫一扫