CSS基础复习笔记

不念不忘少年蓝@ 2022-09-25 11:28 215阅读 0赞

继续CSS~~~~~

CSS给HTML化妆。。。。6666

使用CSS话有3中方法：

1、**直接在元素中写style=””                             内联样式**

2、**在头<head></head>中写样式表<style type =”text/css”> </style>。        内部样式**

3、**外部引用 .CSS 文件在头中写<link>引用CSS文件。     外部样式**

**（在做项目中用外部样式） 为了代码复用，精炼代码。**

**CSS语法**

只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值

属性和属性值之间用 ： 连接

多对属性之间用 ; 隔开

**1、<h1 style=”color:blue;” >CSS的使用 </h1>**

**2、<style type="text/css">**

h2\{color:\#0F0;\}

</style>

3、**在创建个CSS文件**

在css中写注释是 /\*  \*/ 这样的。

就是和在样式表中写一样，然后引用

**这三个属性要写**

rel 是什么，是样式表

type是类型是text/css

最后href 链接路径

**CSS语法规范**

CSS 由多个样式规则组成

每个样式有两个部分： 选择器和样式声明

如：

h1 \{ color:red ; font-size:14px;  \}

**h1是选择器，color是属性，red是值，color:red; 是声明**

CSS规则特性

1、**继承性**

父元素的做了样式定义那么子元素也会

如

在样式表中

body\{

font-family:”微软雅黑”

下面body

写<h1>他就会变，但是有的属性不会继承。

2、**层叠性，不冲突的叠加**

在样式中写

p\{ color:red;  \}

p\{ font-size:16px; \}

都有会效果，这就是层叠性。

3、**优先级，同一个元素加样式，样式重叠了那么就选择优先级高的。**

浏览器默认样式，内部样式，外部样式，内联样式。

**他们的优先级 ： 内联 >  内部\-外部 >默认。**

以优先级高的为准。

**还有就近原则，谁在后面以谁为主。**

如果给一个标签：

p\{red  \}

p\{ blue \}

那么最后的颜色是blue

就相当于覆盖了。

设置字体的时候

body\{font-family:"微软雅黑","文泉驿正黑","黑体"\}

**可以设置多个字体，因为windows有微软雅黑，但是有别的系统，就可以写个逗号。**

**在body中写了所以显示的就都有了，是继承性。**

** **

**CSS选择器**

**1、元素选择器**

通过元素名称来选择CSS作用的目标，比如 <h1>、<p>

对一些基本的设置，有统一性的才用这个。

**2、类选择器**

同一类特征class 类型是相同的。

类选择器允许以一种独立于文档元素的方式来指定样式

语法： className \{color:red\}

**有一类共同特征的。**

.importent\{color:\#FF0\}

**点classname\{ 属性，属性值\}**

选择所有class等于 importent的元素。。

操作一类元素。

便于样式复用。

3、**id选择器**

id选择器以一种独立于文档元素的方式来指定样式。

它仅作用于id属性的值

语法： \#id\{  \}

在元素中id=””

在样式表中写 \#id名\{  \}

** **

**他是唯一的，操作也是对唯一的操作。**

** **

**这也是id 与class的区别。**

页面中有很多元素不好区分可以加id~~~~~~

**4、选择器组**

选择器声明为以逗号隔开的选择器列表

将一些相同的规则作用于

**选择器组，给一组选择器选中的所有元素统一设置样式。**

可以一起写

如：

.importent , \#a1\{ background-color:\#ccc; \}

就把类名为importent和id名为a1的都设置为背景颜色为\#ccc

5、**派生选择器**

派生选择器用来选择子元素，分为2中：

**后代选择器**

选择某元素的所有后代（子孙）元素

**子元素选择器**

选择某元素的所有子元素

**后代选择器：**

<p id="p1">四川省<u><b>成都市</b>新都区</u><b>新都大道</b>8号

/\* 在p1下选择所有的b元素  \*/

\#p1 b \{   \}

p1与 b  之间有空格。

**后代用空格分隔**

**子元素选择器**

同样就是把空格换为大于号，就表示值找儿子，不找孙子。

那么只有p1下层的第一层b设置

而用空格表示所有的这个元素。

**后代与子元素选择器，空格与大于号。**

6、**伪类选择器**

通过状态来获取元素

用于设置一个元素在不同状态下的样式。

**常用伪类：**

**link**

向未被访问过的链接添加样式

visited

向已被访问的超链接添加样式

**active**

向被激活的元素添加样式

**hover**

当鼠标悬停至元素上方时，向该元素添加样式

**focus**

当元素获取焦点时，向该元素添加样式。。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

**a:link\{  \}**

选择没有被点击过的超链接设置样式。

**a:visited\{  \}**

选择被点击过的超链接设置样式

**\#btn:active \{background-color:\#00F;\}**

激活的元素，就是正被点中的元素

就是在点中那个按钮时，背景被变为蓝色。

**p img:hover\{width:150px;hight:150px;\}**

这个就是p下img ，当鼠标悬停的时候宽和高变为150px；

只是悬停，鼠标离开立刻就变回去了。

focus适用于文本框

还有！！！

写文本框是用的input，控件嘛~~~~~~~~

**\#t1:focus\{background-color:\#CCC;\}**

CSS基础复习笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Java基础之复习笔记(上）

相关 Java基础复习笔记（1）

相关 MySQL复习笔记(01)：SQL基础

相关 CSS基础复习之定位

相关 CSS基础复习（续）

相关 CSS基础复习笔记

相关 HTML基础复习笔记

相关 css复习

相关 CSS复习之CSS核心基础

相关 CSS基础笔记