【前端从0开始】CSS——1、CSS基础

最新推荐文章于 2024-06-02 21:27:33 发布

程皮

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量27

点赞数 1

分类专栏：前端从0开始文章标签：前端 css

本文链接：https://blog.csdn.net/a1137588003/article/details/132218186

版权

前端从0开始专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS基础

1、简介

CSS是Cascading Style Sheets的英文缩写,即层叠样式表
Html【Hyper Text Markup Language】
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS是用于布局与美化网页的
CSS能实现内容与样式的分离，方便团队开发
CSS是由W3C的CSS工作组产生和维护的
- 1996年W3C正式推出了CSS1
- 1998年W3C正式推出了CSS2
- 2007年W3C正式推出了CSS2.1
- 2011年W3C正式推出了CSS3,目前仍在持续完善中

2、语法

CSS 由选择器、属性、属性值组成

选择器{
样式属性名1：样式属性值1;
样式属性名2：样式属性值2;
…
}

选择器通常是指需要改变样式的 HTML 元素
属性是指希望设置的样式属性
属性和值之间用冒分开，多个属性之间加分号隔开
CSS是大小写不敏感的,在CSS语法中推荐使用小写

如：body{color:red；font-size:20px}
<!--   设置了页面为字体颜色为红色，字体大小为20像素 -->

3、CSS注释

CSS里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。
CSS注释格式如下：

div{
    /* 设置宽度为200px */
    width:200px;
}

4、CSS长度单位

相对长度单位：
px 像素（Pixel）
% 百分比
em : Element meter 根据文档字体计算尺寸
rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
绝对长度单位：
in英寸（Inch）
pt 点（Point）
cm 厘米（Centimeter）
mm 毫米（Millimeter）
换算比例：1in = 2.54cm = 25.4 mm = 72pt
calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

5、CSS引入方式

引入方式

行内样式
内部样式
外部样式

5.1 行内样式

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

5.2 内部样式

<style>
	选择器{
		样式名称:值;
	}
</style>

5.3外部样式

在外部创建CSS文件，引入到HTML中：
引入方式：

link标签引入：<link rel="stylesheet" href="css文件路径">


<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head> 
    <body>
        <h1 class="text">外部样式</h1> 
    </body> 
</html>

improt方式引入：在样式中 @improt url(css文件路径);
注意该方法必须写在style标签或CSS文件的第一行
style标签中使用:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
      		@import url('../css/demo.css');
      	</style>
    </head> 
    <body>
        <h1 class="text">外部样式</h1> 
    </body> 
</html>

css文件中使用:

@import url('../css/demo.css');
div{
  color:red;
}

6、选择器

css 选择器⽤于选择你想要的元素的样式的模式
要使⽤css对HTML⻚⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器
HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的。

6.1标签名选择器

选择器名称为html标签名称

p  { text-indent:3em; }	/*当中的选择器是p*/
h1{ color:red; }	/*当中的选择器h1*/

6.2 类选择器

选择器名称以 . 开始，后面再加上对应元素class属性值

<style>
	.dark-row{ background-color:#EAEAEA; }
</style>
<p class="dark-row">第一段</p>

6.3 ID选择器

选择器名称以#开始，后面再加上对应元素的id属性值
将对应元素的id属性值设为id选择器名称

<style>
	#main{ text-indent:3em; }			/*ID名称main前加上一个#号*/
</style>
<p id="main">文本缩进3em</p>

6.4 通配所有元素

*{font-size:12px;color:#888}

6.5 分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

6.6 复合选择器

后代选择器: 以空格分隔
子元素选择器: 以>分隔
相邻兄弟选择器:以+分隔
普通兄弟选择器:以~分隔
注意：复合选择器的权重为所有基础选择器的和

<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
    color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素；*/
p ~ b {
   color: blue;
}
</style>
<ul class="wrapper">
  <li>1
      <b>这是粗体123</b>
      <p>这是一段段落</p>
      <span>12344555656</span>
      <b>这是粗体</b>
      <p>这是一段段落2</p>
  </li>
  <li>2
       <p>这是一段段落</p>
       <b>这是粗体</b>
       <b>这是粗体2</b>
   </li>
   <li>3</li>
</ul>

6.7 选择器的权重

权值等级划分，一般来说是划分4个等级：

类型	权重
内联样式	如: style=" "，权值为1000
ID选择器	如：#name，权值为0100
class类选择器，伪类和属性选择器	如.name，权值为0010
标签选择器和伪元素选择器	如div p，权值为0001
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、继承	如*，权值为0000

计算规则

css选择器表达式	特指度计算结果
p	1
p.large	11
p#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.li.list li	114

6.8 最⾼权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

css选择规则的权值不同时，权值高的选择器优先
css选择规则的权值相同时，后定义的选择器规则优先
css属性后面加 !important 时，无条件绝对优先
总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

7、CSS三大特性

7.1 层叠性

所谓层叠性是指多种CSS样式的叠加
层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）
样式不冲突，不会层叠
样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

7.2 继承性

CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承
不是所有的样式都会被⼦标签继承，字体类font- ; ⽂本类 text- ；颜⾊color ；⾏⾼line-height 等可以被继承
a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊

7.3 优先级

权重的优先级，决定哪个样式最终⽣效
权重相同：后者⽣效；权重不同：权重⾼者⽣效

程皮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端从0开始】CSS——1、CSS基础

CSS是Cascading Style Sheets的英文缩写,即层叠样式表CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).CSS是用于布局与美化网页的CSS能实现内容与样式的分离，方便团队开发CSS是由W3C的CSS工作组产生和维护的1996年W3C正式推出了CSS11998年W3C正式推出了CSS22007年W3C正式推出了CSS2.12011年W3C正式推出了CSS3,目前仍在持续完善中。
复制链接

扫一扫