CSS整理

最新推荐文章于 2024-07-23 14:51:29 发布

m0_61649314

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量44

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_61649314/article/details/132864145

版权

1 CSS的概念

层叠样式表(英文全称：Cascading Style Sheets)

层叠：多个样式可以作用在同一个html的元素上，同时生效
是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。

2、CSS的优势

功能强大
将内容展示和样式控制分离

降低耦合度。解耦
让分工协作更容易
提高开发效率

3 CSS的使用

1、内联样式
内联样式是直接在HTML元素上使用style属性来指定样式。

<p style="color: red; font-size: 16px;">这是一段红色文字，字体大小为16像素。</p>
style属性包含了多个CSS属性和对应的值，用分号进行分隔。

2、内部样式表
内部样式表是将CSS样式写在HTML文档的

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色文字，字体大小为18像素。</p>
</body>
</html>
CSS样式被包裹在<style>标签中，并应用到了<p>元素上。

3、外部样式表
外部样式表是将CSS样式写在一个独立的CSS文件中，然后通过标签将其引入到HTML文档中。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段应用了外部样式表的文字。</p>
</body>
</html>
//<link>标签的href属性指定了外部CSS文件的路径。

4、CSS选择器
CSS选择器用于选择要应用样式的HTML元素。常见的选择器有标签选择器、类选择器和ID选择器等。

p {
  color: green;
}

.text {
  font-weight: bold;
}

#heading {
  font-size: 24px;
}

5、CSS样式
（1）文本样式

p {
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
}

h1 {
  color: #f00;
  font-size: 24px;
  font-family: Arial, sans-serif;
  text-align: center;
}
color 属性设置文本颜色，font-size 属性设置字体大小，font-weight 属性设置字体粗细，text-decoration 属性设置文字下划线。text-align 属性用于居中对齐。

2、背景样式

body {
  background-color: #fff;
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

div {
  background-color: #f0f0f0;
  background-opacity: 0.8;
}
background-color 属性设置背景颜色，background-image 属性设置背景图像，background-repeat 属性控制图像是否重复显示，background-position 属性设置背景图像的位置。background-opacity 属性设置背景的透明度。

（3）边框样式

div {
  border: 1px solid #999;
  border-radius: 5px;
}

img {
  border: none;
}
border 属性设置边框样式，包括线条宽度、线条样式和边框颜色。border-radius 属性用于设置边框的圆角弧度。none 值可用于取消元素的边框样式。

（4）盒子样式

div {
  width: 300px;
  height: 200px;
  padding: 10px;
  margin: 20px;
  background-color: #f0f0f0;
}
width 和 height 属性分别设置盒子的宽度和高度，padding 属性设置内边距，margin 属性设置外边距。background-color 属性设置背景颜色。

6、浮动

float: none | left | right;

none：默认值，元素不浮动，按照正常布局进行排列。
left：元素向左浮动。
right：元素向右浮动。
clear清除浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
浮动的元素都脱离了常规文档流；
为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
如果想要非浮动元素不受浮动元素的影响，需要使用clear属性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮动，常规文档流,
<br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互
不影响
如果不想让div2被浮动元素影响，需要添加clear属性。
添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠
了，大家可以自己试验一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮动，常规文档流,
<br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互
不影响
如果不想让div4被浮动元素影响，需要添加clear属性。
添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠
了，大家可以自己试验一下
clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素
的影响
</div>
<div style="background: lavender;">
div5-未浮动，常规文档流,
</div>
</body>
</html>

7、CSS选择器
（1）元素选择器：通过元素名称来匹配 HTML 文档中的元素。

p {
  /* 对所有 <p> 元素应用样式 */
}

（2）类选择器：通过元素的 class 属性来匹配 HTML 文档中的元素。

.my-class {
  /* 对所有 class="my-class" 的元素应用样式 */
}

（3）ID 选择器：通过元素的 id 属性来匹配 HTML 文档中的元素。

#my-id {
  /* 对 id="my-id" 的元素应用样式 */
}

（4）属性选择器：通过元素的属性值来匹配 HTML 文档中的元素。

input[type="text"] {
  /* 对 type="text" 的 <input> 元素应用样式 */
}

8、盒子模型
（1）内边距（Padding）

语法：padding: top right bottom left;
示例：padding: 10px; （上、右、下、左都为10px），padding: 10px 20px; （上下为10px，左右为20px），padding: 10px 20px 30px 40px; （顺序为上、右、下、左）
（2）边框（Border）

语法：border: width style color;
示例：border: 1px solid #000; （宽度为1px，样式为实线，颜色为黑色）
（3）外边距（Margin）

语法：margin: top right bottom left;
示例：margin: 10px; （上、右、下、左都为10px），margin: 10px 20px; （上下为10px，左右为20px），margin: 10px 20px 30px 40px; （顺序为上、右、下、左）
（4）盒子尺寸（Width和Height）

语法：width: value; 和 height: value;
示例：width: 200px; （宽度为200px），height: 300px; （高度为300px）
（5）盒子模型属性缩写

语法：padding: top right bottom left;、margin: top right bottom left;
示例：padding: 10px 20px 10px 20px; （顺序为上、右、下、左，都为10px和20px）
注意：在语法中，top、right、bottom、left 表示上、右、下、左方向的属性值。可以使用具体的数值（如像素值）、百分比或者其他支持的单位来定义属性值。

m0_61649314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS整理

注意：在语法中，top、right、bottom、left 表示上、右、下、左方向的属性值。（2）类选择器：通过元素的 class 属性来匹配 HTML 文档中的元素。（3）ID 选择器：通过元素的 id 属性来匹配 HTML 文档中的元素。（4）属性选择器：通过元素的属性值来匹配 HTML 文档中的元素。（1）元素选择器：通过元素名称来匹配 HTML 文档中的元素。（顺序为上、右、下、左，都为10px和20px）（上、右、下、左都为10px），（上、右、下、左都为10px），（顺序为上、右、下、左）
复制链接

扫一扫