web之CSS页面美化和布局控制

朝饮暮酒

已于 2023-11-22 01:03:07 修改

阅读量723

点赞数 1

分类专栏： web前端文章标签： css 前端 html

于 2022-03-11 17:05:48 首次发布

本文链接：https://blog.csdn.net/weixin_44857328/article/details/123429442

版权

web前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1.什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

2.css的作用

好处:
1.功能强大
2.将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
*提高开发效率

3.CSS的使用: CSS与html结合方式

1.内联样式

在标签内使用style属性指定css代码
如:

<div style="color :red;">hello css</div>

2.内部样式

在head标签内，定义style标签, style标签的标签体内容就是css代码
如:

<style>
div{
color :blue;
</style>


<div>hello css</div>

3.外部样式

1.定义css资源文件。
2.在head标签内，定义link标签,引入外部的资源文件
*如:

<link rel="stylesheet" href="css/a.css">|
<div>hello css</div>
<div>hello css</div>

注意： 1作用范围太大通常使用2 3 内联样式和外部样式做出针对处理

4. css语法:

格式:
选择器{
属性名1:属性值1; .
属性名2:属性值2;
}

选择器:筛选具有相似特征的元素
CSS选择器的作用是从HTML页面中找出特定的某类元素
*注意:
本每一对属性需要使用;隔开，最后一对属性可以不加;

5.选择器

1.基础选择器

1.id选择器:

选择具体的id属性值的元素.建议在一个html 页面中id值唯一
语法: #id属性值{ … . }

id选择器使用#进行标识，后面紧跟id名

其基本语法格式如下：

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


标签
<p id="id名"></p>

元素的id值是唯一的，只能对应于文档中某一个具体的元素。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
  <style>
  #Style1{
    color: red;
  }
  </style>
</head>
<body>

<h1 id="Style1">标题1</h1>

</body>
</html>

2.标签选择器

概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：
标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签

优点：
是能快速为页面中同类型的标签统一样式

缺点：
不能设计差异化样式。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
  <style>
  h1{
    color: red;
  }
  </style>
</head>
<body>

<h1 >标题1</h1>

</body>
</html>

3.类选择器

类选择器使用“.”（英文点号）进行标识，后面类名

其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名” 即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
  <style>
  .one{
    color: red;
  }
  </style>
</head>
<body>

<h1 class="one">标题1</h1>
<h1 >标题2</h1>
</body>
</html>

4.元素选择器:选择具有相同标签名称的元素

*注意: id选择器优先级高于元秦选择器
元素名(标签名){键1:值1;键2:值2;…键n:值n}

 元素选择器的特点,所有该元素名的元素都受该效果影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
  <style>

p{
  color:#330066;
  font-size: 40px;
 }

  
</style>
</head>
<body>

<p>我是文本</p>
<p>我是文本</p>
<p>我是文本</p>


</body>
</html>