CSS学习总结

最新推荐文章于 2022-07-09 17:06:38 发布

Caroll1102

最新推荐文章于 2022-07-09 17:06:38 发布

阅读量90

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45936583/article/details/114798312

版权

CSS学习总结

1.CSS样式规则
2.选择器
3.外部样式表
4.内部样式表
5. 颜色
6.尺寸
7.对齐
8.边框
9.边距

CSS是级联样式表

1.CSS样式规则

由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
在这里插入图片描述
这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。
说明：
(1)选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
(2)每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
(3)属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

2.选择器

(1)id 选择器

例子	解释
/* 注意：id选择器前有 # 号。 */#sky{ color: blue;}	找到页面上id为sky的那个元素让它呈现蓝色
`<p id="sky">蓝色的天空</p>`	蓝色的天空这几个字就将会是蓝色的

(2)class 选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
以上代码定义了三条规则，分别应用于页面上对应的元素，如只要页面上某元素的class为red，那么就让它呈现红色。
我会居中显示的
我是红色的
我又红又大还居中
我也可以是红的

3.外部样式表

在html文件中引入：
<link rel="stylesheet" href="文件名.css">
一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/文件名.css之类的

4.内部样式表

将样式放在 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;
   }
   .haha {
     margin-top: 100px;
     color: chocolate;
     font-size: 50px;
   }
 </style>
</head>
<body>
 <h1>我是有样式的</h1>
 <hr>
 <p class="haha">还是有点丑：)</p>
</body>
</html>

在 <head>元素中引入了 <style>标签，放入了样式。只有页面的样式规则较少时可采用这种方式。

5. 颜色

采用颜色名称也可以使用颜色RGB16进制值，来设定前景或背景的颜色。

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<h3 style="background-color:DodgerBlue;">DodgerBlue</h3>
<h3 style="background-color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="background-color:Gray;">Gray</h3>
<h3 style="background-color:SlateBlue;">SlateBlue</h3>
<h3 style="background-color:Violet;">Violet</h3>
<h3 style="background-color:LightGray;">LightGray</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="background-color:#ee82ee;">#ee82ee</h3>
<h3 style="background-color:#ffa500;">#ffa500</h3>
<h3 style="background-color:#6a5acd;">#6a5acd</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<p style="color:MediumSeaGreen;">Ad facilis est ducimus rem consectetur, corporis omnis, eveniet esse dolor molestiae numquam odio corrupti, sed obcaecati praesentium accusamus? Tempora, dolor a?</p>

6.尺寸

用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像素 px，百分比 %等。
在这里插入图片描述
实现代码如下：

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

css中

.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;
}

7.对齐

对于元素中的文本，设置text-align属性为left, center, right。
盒子模型由内容 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;
}

效果如下：
在这里插入图片描述

8.边框

<html>
<head>
  <link rel="stylesheet" href="4.css">
</head>
<body>
  <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>
</body>
</html>

.example-1 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-4 {
border-left: 5px solid purple;
}

效果如下：
在这里插入图片描述

9.边距

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

Caroll1102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

CSS学习总结1.CSS样式规则2.选择器3.外部样式表4. 内部样式表5. 颜色6.尺寸CSS是级联样式表1.CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:这条规则表明，页面中所有的一级标题都显示为蓝色，字体大小为12像数。说明：(1)选择器是您需要改变样式的对象（上图的规则就一级标题生效）。(2)每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）(3)属性（property）是您希望设置的样式属性（style attri
复制链接

扫一扫