CSS基础知识总结

最新推荐文章于 2022-11-18 17:34:37 发布

嘻嘻*哈哈

最新推荐文章于 2022-11-18 17:34:37 发布

阅读量191

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_50395011/article/details/110930035

版权

CSS样式:

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

CSS代码语法:

CSS 样式由选择符和声明组成，而声明又由属性和值组成

选择符:{属性:值}
又称选择器，指明网页中要应用样式规则的元素;

p{
  color:red;
}

声明：
在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔;

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

CSS 样式分类：

1）内联式css样式：

把css代码直接写在现有的HTML标签中；
例：

<p style="color:red">文字是红色。</p>

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
例：

<p style="color:red;font-size:12px">文字是红色。</p>

2）嵌入式css样式：
就是可以把css样式代码写在<style type="text/css"></style>标签之间。

如下面代码实现把<span>标签中的文字设置为红色：

<style type="text/css">
span{
    color:red;
}
</style>

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

3）外部式css样式：

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

代码：

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

注意：

css样式文件名称以有意义的英文字母命名，如 main.css。
rel=“stylesheet” type=“text/css” 是固定写法不可修改。
标签位置一般写在标签之内。

CSS选择器：

每一条css样式定义由两部分组成;

形式：

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素;

1）标签选择器：

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
代码：

p{
   font-size:12px;
   line-height:1.6em;
}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

2）类选择器：

类选择器在css样式编码中是最常用到的。

语法：

.类选器名称{

css样式代码;

}

注意：

英文圆点开头
其中类选器名称可以任意起名,但不要起中文

使用方法：
第一步：使用合适的标签把要修饰的内容标记起来：

<span>人见人爱，花见花开</span>

第二步：使用class="类选择器名称"为标签设置一个类：

<span class="stress">人见人爱，花见花开</span>

第三步：设置类选器css样式：

.stress{
      color:red;
}

3）ID选择器

ID选择器都类似于类选择符，但也有一些重要的区别：

为标签设置id=“ID名称”，而不是class=“类名称”。
ID选择符的前面是井号（#）号，而不是英文圆点（.）。

类和ID选择器的区别：

相同点：可以应用于任何元素

不同点：

ID选择器只能在文档中使用一次。在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

<p>今天<span class="stress bigsize">天气</span>真好啊！</p>

4）子选择器：

子选择器，即大于符号(>),用于选择指定标签元素的子元素：

.food>li{
    border:1px solid red;
}

这行代码会使class名为food下的子元素li加入红色实线边框。

5）包含(后代)选择器:

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素：

.first  span{

      color:red;
}

包含(后代)选择器与子选择器的区别:

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代;
后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择;

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

6）通用选择器:

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中任意标签元素:

例：html中任意标签元素字体颜色全部设置为红色：

* {
  color:red;
}

7）伪类选择符:

它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{
    color:red;
}

这行代码会使被标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。

8）分组选择符:

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）;

例：为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{
color:red;
}

它相当于下面两行代码：

h1{
color:red;
}

span{
color:red;
}

CSS的特性：

继承
层叠

继承：

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代；
如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

但注意有一些css样式是不具有继承性的。如:

border:1px solid red;

层叠

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

css样式优先级：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

CSS常用属性：

文字属性：

字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

代码实现：为网页中的文字设置字体为宋体。

body{
  font-family:"宋体";
}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

字号、颜色
可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{
   font-size:12px;
   color:#666;
}

粗体
可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线。

p span{
    font-weight:bold;
}

斜体

p a{
   font-style:italic;
}

下划线
有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字：

p a{
   text-decoration:underline;
}

删除线

p a{
   text-decoration:line-through;
}

文字对齐
text-align 属性规定元素中的文本的水平对齐方式。

p a{
   text-align:center;
}

段落属性

缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{
  text-indent:2em;
}

【2em的意思就是文字的2倍大小】

行间距
行间距属性（line-height），实现设置段落行间距为1.5倍：

p{
  line-height:1.5em;
}

字间距、字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现：

h1{
    letter-spacing:50px;
}

【这个样式使用在英文单词时，是设置字母与字母之间的间距】

单词间距设置：
如果想设置英文单词之间的间距，可以使用word-spacing来实现：

h1{
    word-spacing:50px;
}

背景属性：

背景颜色

body{
  background-color: red;
}

背景图片

body{
  background-image: url('1.jpg');
}

display属性
用于控制HTML元素的显示效果。

css盒子模型

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

.margin-test {
  margin: 5px 10px 15px 20px;
}

padding：用于控制内容与边框之间的距离；

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

.padding-test {
  padding: 5px 10px 15px 20px;
}

Border(边框)：围绕在内边距和内容外的边框。
Content(内容)：盒子的内容，显示文本和图像。
float浮动：
在 CSS 中，任何元素都可以浮动。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
值：

left：向左浮动
right：向右浮动
none：默认值，不浮动

overflow溢出属性：

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

position定位
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）
absolute（绝对定位）
fixed（固定）

z-index
设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。

#i2 {
  z-index: 999;
}

透明属性
（1）用rgba的方法来设置

这种方式只是改变背景颜色的透明度

.touming {
            width: 300px;
            height: 200px;
            background-color: rgba(0,0,0,0.3);
        }

（2）用opacity的方法设置

这种方法不只改变背景透明，是改变整个块儿的内容透明度

.touming {
            width: 300px;
            height: 200px;
            opacity:0.3
        }

结语：总结到这里就结束了，谢谢大家阅读，你觉得喜欢或对你有帮助，可以点赞收藏，如果觉得哪里不足，也欢迎指正。戳我可以领取更多免费资料，包括基础知识，面试题。

嘻嘻*哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS基础知识总结

CSS样式:CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。p{ font-size:12px; color:red; font-weight:bold;}使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。CSS代码语法:CSS 样式由选择符和声明组成，而声明又由属性和值组成选择符:{属性:值}又称选择器，指明网
复制链接

扫一扫