CSS的个人见解

最新推荐文章于 2024-09-03 08:51:36 发布

一位不透露姓名的先生

最新推荐文章于 2024-09-03 08:51:36 发布

阅读量125

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_48967079/article/details/107082304

版权

CSS总结

CSS是什么？

css是层叠样式表(英文全称：2113Cascading Style Sheets)是一种5261用来表现HTML（标准通用4102标记语言的一个应用）或1653XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS的作用

css的作用

• 1.实现了样式和html的代码分离。

• 2.弥补html对属性的的控制不足。

• 3.精确的控制页面的布局。

• 4.可以提高页面的执行效率。

• 5.css还有特殊的功能。

CSS的特性

•1.继承性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS的继承性 </title>
  <style>
   body{
      font-size:105px;
    color:red;
   }
   p{
     font-size:25px;
   }
  </style>
 </head>
 <body>
    <p>HelloWord</p>
 </body>
</html>

•2.层叠性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> CSS的层叠性 </title>
  <style>
   body{
      font-size:105px;
    color:red;
   }
   p{
    font-size:25px;
   }
  </style>
 </head>
 <body>
    <p>HelloWord</p>
 </body>
</html>

CSS的基本语法

基本语法

<style type="text/css">
选择器{    
      属性1:属性值；
      属性2：属性值
     }
</style>

CSS选择器

1.类选择器

<html>
 <head>
  <title> 类选择器 </title>
  <style>
    .p1{ color:red }
  </style>
 </head>
 <body>
<p class="p1">欢迎来到我的博客</p>
</body>
</html>

2.id选择器

<html>
 <head>
  <title> id选择器 </title>
  <style>
  #p2{ font-size:100px;}
  </style>
 </head>
 <body>
    <p   id="p2">欢迎来到我的博客</p>
 </body>
</html>

3.标签选择器

<html>
 <head>
  <title> 标签选择器 </title>
  <style>
  p{color:red;}
  </style>
 </head>
 <body>
  <p>欢迎来到我的博客</p>
  <p>HelloWord</p>
</body>
</html>

4.包含选择器

<html>
 <head>
  <title> 包含选择器 </title>
  <style>
  ol  ul  li{font-size:50px; color:red}
  </style>
 </head>
 <body>
   <ol>
  <li>欢迎
  <li>23
  <ul>
     <li>来到博客
   </ul> 
  </ol>
 </body>
</html>

5.伪类

1.未连接 a:link

2.已经访问链接 a:visited

3.进入链接 a:hover

4.激活（按下）状态 a:active
其中的hover 和active*可以用于其他控制

<html>
 <head>
  <title> 伪类选择器 </title>
  <style>
    a:hover{font-size:50px;}
  </style>
 </head>
 <body>
    <a  href="#">超链接</a>
 </body>
</html>

6.通配符选择器

	* {
}
选择所有标签

7.相邻选择器

div +p{
}

8.相邻所有选择器div ~p

div ~p{
}

选择器的优先级

优先级关系：内联样式>ID 选择器 >类选择器 = 属性选择器 = 伪类选择器 > 标签选择器= 伪元素选择器

一位不透露姓名的先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的个人见解

CSS总结CSS是什么？css是层叠样式表(英文全称：2113Cascading Style Sheets)是一种5261用来表现HTML（标准通用4102标记语言的一个应用）或1653XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS的作用css的作用• 1.实现了样式和html的代码分离。• 2.弥补html对属性的的控制不足。• 3.精确的控制页面的布局。• 4.可以提高页面的执行效率。• 5.css还有特殊的功能。CSS的特性•1.继承性<
复制链接

扫一扫