2021.4.21学习css第一天-CSDN博客

本文链接：https://blog.csdn.net/JINGMaNong/article/details/115873512

CSS 基础

什么是 CSS?
CSS是层叠样式表（Cascading Style Sheet ）的简称。有时候我们也称之为css样式表或级联样式表
css也是一种标记语言。

2.CSS 的作用?
css主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
css美化HTML,布局网页。

3.在 HTML 网页中如何使用 CSS?

CSs最大价值：有HTML专注去做结构呈现，样式交给css,即结构(HTML)与样式（css）相分离。

在这里插入图片描述

CSS引入方式

1.内联定义 (Inline Styles)
即是在[html]的元素/标记/标签的内部使用对象的 style 属性定义适用其的样式表属性。已达到控制当前 html 元素的样式。
在[html]的元素/标记/标签的开始标记中设置样式。
格式:<html 标记 style=”样式名称 1:样式值 1;样式名称 2:样式值 2”>显示的内容</html 标记>

在这里插入图片描述

例如:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
  <title>测试内联定义 CSS</title>
   </head>
    <body>
    <h1>1.内联定义</h1>
     <h2>在[html]的元素/标记/标签的开始标记中设置样式。</h2> 
     <div style="width:200px;height:200px;background-color:red;"></div> 
  </body> 
  </html>

在这里插入图片描述缺点:当我们给一个 html 标记设置很多样式的时候，这个 HTML 标记就会变得很长，以后修改起来不方便。适合于样式定义较少的情况。

2. 定义内部样式块对象 (Embedding a Style Block)

在这里插入图片描述

3. 链入外部样式表文件 (Linking to a Style Sheet)
外部样式表
在这里插入图片描述
CSS引入方式总结

4.css 选择器

*CSS选择器的作用
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。
在这里插入图片描述以上css做了两件事：

1. 找到所有的标签h1 标签。 选择器
2. 设置这些标签的样式，比如颜色为红色。

CSS基础选择器

1.元素选择器
根据 html 元素的名称选中被控制的 html 标记。

在这里插入图片描述

2.id选择器
根据给 html 标记设置的 id 属性来选中被控制的 html 标记。如果要使用 id 选择器那么首先需要给 html 标记去设置 id 属性。
在这里插入图片描述

3. 类【class】选择器
根据给 html 标记设置的 class 属性来选中被控制的 html 标记。如果要使用类【class】选择器那么首先需要给 html 标记去设置 class 属性。
在这里插入图片描述

4. 包含选择器
选择所有被父元素包含的子元素。
在这里插入图片描述

5. 属性选择器
根据 html 标记的属性来选中被控制的元素

元素 [属性名称] { sRules }：选择具有某个属性的元素
元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素

6. 子元素选择器
选择所有作为 E1 子对象的 E2 。

7. 选择器分组
将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。

在这里插入图片描述 常用的伪类

1.:link—设置 a 标记在未被访问前的样式。格式: a: link {css 样式属性} 2.:hover----设置对象在其鼠标悬停时的样式。格式:Selector: hover{css 样式属性}
3.:active—设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。应用于任何对象格式:Selector:active{css 样式属性}
在这里插入图片描述