CSS的基础预习

最新推荐文章于 2024-08-30 14:40:01 发布

LisnmX

最新推荐文章于 2024-08-30 14:40:01 发布

阅读量89

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/LisnmX/article/details/124178744

版权

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加

CSS选择器的基础类型

标签选择器
类选择器
id选择器
通配符选择器

CSS的基础运用

基本语法格式
字体的相关属性
文本相关属性
css三种样式表
行内元素、块级元素的特点及其转换
css的三大特性
权重

一、基础选择器

标签选择器

标签选择器：用标签名来进行定义，由标签名做选择器

<style>
    p{
        color: blue;
        font-size: 20px;
    }
</style>

呈现效果
在这里插入图片描述

类选择器

类选择器：由class的属性值来充当选择器，用class来调用，可单独选择一个标签或或则多个标签同时定义其格式。

<style>
    .one {
        color: green;
        font-size: 16px;
    }
</style>
  <p class="one">外面有好多人</p> 
  <p class="one">外面有好多书</p>

在这里插入图片描述

id选择器

id选择器：以id属性来设置id选择器，以#加id的属性值来进行定义，是一个标签特定的属性，不可重复只能调用一次。

<style>
    #one {
        color: green;
        font-size: 16px;
        text-align: center;
    }
</style>
 <p id="one">外面有好多人</p> 
  <p id="one">外面有好多书</p>

在这里插入图片描述

通配符选择器

通配符选择器：表示选取页面内所有的标签，通常运用在重置浏览器的边距

<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

二、CSS的基础运用

1、CSS的基础格式：

选择器{ 属性名：属性值；属性名：属性值；}

2、字体的相关属性：

字体系列：font-family：属性值；
字体大小：font-size：属性值；（属性值数字表示，单位px）
字体粗细：font-weight：属性值
normal：正常（默认）数值 400
bold ：加粗；
bolder ：特粗；数值 700；
lighter :细体
字体样式：font-style：属性值
normal：不倾斜；
italic：倾斜（相似的标签:i标签）
字体的复合属性：
font: font-style；font-weight；font-size；font-family；
p{
italic；400（normal）；16px；Microsoft yahei；
}
注意：固定顺序，不能改变，一点要有后两个的属性值；

<style>
   p { 
            font-family: serif;
            font-size: 20px;
            font-weight: 400;
            font-style: normal;
            color:rgb(60, 124, 52);
            text-align: center;
   }
</style>
 <p calss="hai">傍晚的海金碧辉煌，神秘而美丽。夕阳西下，天空还燃烧着一片橘红色的晚霞</p>

在这里插入图片描述

3、文本的相关属性

文本颜色：color：属性值；
文本对齐：text-align：属性值；
left：对其左边；
center：对其中间；
right：对齐右边；
装饰文本：text-decoration：属性值；
none：无
underline:下划线；
overline：上划线；
through-line：删除线；
文本缩进：text-inden:属性值；（单位 px 或则 em）
注意：1em：表示当前一个文字大小的距离。
文本间距：text-height：属性值；
行间距：分为上间距、文本高度、下间距；
两行文字之间的间距是由上间距与下间距之和决定的

注意：1、让文字出垂直居中，需让文本高度和盒子高度一样高。
2、删除链接中的下划线，用文本装饰中的none进行定义。

<style>
   p { 
            font-family: serif;
            font-size: 20px;
            font-weight: 400;
            font-style: normal;
   }
   .one {
       text-align: center;
       text-decoration: none;
       color: rgb(30, 112, 33);
       text-indent: 2em;
       line-height: 40px;
   }
</style>
<p class="one">春雨沙沙地下着，有如绣花针，有如牛毛。河面的雪融化了，雪水汇成小溪，淙淙地流着。河水中，一只只小蝌蝌顽皮
     地游着，好像在找它的妈妈，可爱极了。
</p>
<a href="https://www.baidu.com/" class="one" >点击此处到百度网页</a>

在这里插入图片描述
对垂直居中文本的应用：

<style>
div{
    width: 300px;
    height: 50px;
    line-height: 50px;
    color: blue;
    background: pink;
    text-align: center;
    margin:0 auto;
}
</style>
div>额复合管会否而未回复哈</div>```

在这里插入图片描述

4、三种样式表：

行内样式表：内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

内部样式表：内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

外部样式表：链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

5、行内元素、块级元素的特点及其相互转换：

在这里插入图片描述
行内元素转化为块级元素：display:block；
块级元素转化为行内元素：display:inline；
转化为行内块元素：diisplay:inline-block；

<style>
div{
  display: inline;
  background: rgb(200, 200, 242);
}
</style>
<div>额复合管会否而未回复哈</div>
<div>不出外勤会计部分</div>

在这里插入图片描述

6、CSS样式的三大特性：

层叠性
层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
举例：下面代码，出现一个div 标签指定了相同样式不同值的情况，这就是样式冲突。

div{
    color:red;
}
div{
    color:blue;
}

原则

1.通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。
2.样式不冲突，不会层叠。样式冲突，遵循就近原则。
3.长江后浪推前浪，后面样式盖前面

继承性：
继承性是指当子标签没有设置样式时，会继承父标签的样式。
比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

<style>
    div{color:pink;font-size:20px;}
</style>
<div>
    <span>
        我是什么颜色的？
    </span>
</div>

可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。

优先级：

总结优先级
!important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器
使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
使用了通配符的规则。
同一类选择器则遵循就近原则。

7、权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

LisnmX

关注

0
点赞
踩
0

收藏

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

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加CSS选择器的基础类型标签选择器类选择器id选择器通配符选择器CSS的基础运用基本语法格式字体的相关属性文本相关属性css三种样式表行内元素、块级元素的特点及其转换权重一、基础选择器标签选择器标签选择器：用标签名来进行定义，由标签名做选择器<style> p{ color: blue; font-size: 20px; }
复制链接

扫一扫