css的引入以及选择器

大一不好玩

已于 2023-04-02 16:28:20 修改

阅读量83

点赞数

文章标签： css html 前端

于 2023-03-30 21:41:21 首次发布

本文链接：https://blog.csdn.net/2201_75749194/article/details/129847897

版权

1.1 css是对html的修饰，对于html来说css的引入有4种方式；

1行内样式：通过style属性进行实现，在html中使用style属性来修饰html中的内容；

<!DOCTYPE HTML>
<html lang="en">
<head>
   <title></title>
</head>
<body>
   <h1 style="color":red; font-size:20px;>这是第一个css文件</h1>
</body>
<html>   <!--在h1题目标签下，通过style属性来修饰,style属性color表示颜色，font—size表示文本尺寸大小-->

2内嵌样式：通过style标签；

<!DOCTYPE HTML>
<html lang="en">
<head>
   <title></title>
   <style  type="text.css">
      h1{
           color:red;
           font-size:20px;
        }  
     </style>
</head>
<body>
 <h1>这是一个内嵌样式的css</h1>
</body>
</html>   <!--type表示的是类型，type表示是文本类型，css是告诉文本中的内容为css标准写-->

3外链样式：link标签的导入，在css中写出对相应的html的修饰在在html中使用link标签进行导入；

<!DOCTYPE HTML>
<html lang="en">
<head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="..\css>
</head>
<body>
   <h1>这是外链导入css文件</h1>
</body>
</html> 
  <!--rel属性规定当前文档与链接文档之间的关系，stylesheet是描述的外部样式表 ,href表示规定链接的文档的位置，可以是相对路径，可以是绝对路径-->

4导入样式：@import url（" ")

1.2 行内式；在html中的style标签设定css样式；

嵌入式；是将css样式写在对应网页中的style标签中；

链接式；在写出一个css文件后引入html中通过link实现；

导入式；将一个独立的css文件引入html中，引入外部css文件，在style标签中用@import " ...css"而且必须为绝对路径

2.1选择器

2.1.1基本选择器

基本选择器包括：标签选择器（通过标签的类型名称获得），ID选择器，类选择器，通用选择器（通配符）其中优先级为ID>class>标签>通配符；

<!DOCTYPE HTML>
<html lang="en">
<head>
  <title></title>
  <style type="text/css">
  div{
       color:red;
       }
   #one{
        color:yellow;
        }
   .two{
       color:green;
        }
    *{
       color:blue;
      }
</head>
<body>
  <div id="one" class="two">
  只是我的第一个写的文件</div>
 <div>
    呵呵，我也会啊
 </div>
</body>
</html>  <!--同时ID，class，标签，通配符在的情况下顺序为：ID>class>标签>通配符；-->

2.2.1包含选择器

子代选择器（获取的是某个标签的子标签）

后代选择器（获取的是某个标签的所有子标签）

分组选择器（逗号选择期，通过逗号分开，可以同时设置多个标签，使用时用逗号分割）

3.2.1属性选择期

在html中的选择对应的属性标签，对其中的内容进行修饰; 1选中某个标签的某个属性表达为标签[属性]{修饰值}；2确定某个值为标签[ 属性="属性值"]{修饰值}；3包含某个值是标签[属性*="包含的值"]{修饰值}；4以某个值开头为标签[属性^="值"]{修饰值}；5以某个值结束为标签[标签$="值"]{修饰值}；6+表示修饰的是下一个标签的为标签+标签{修饰值}；7属性等于某个属性值为[标签="属性值"]

4.21

伪类选择期

伪类：同一个标签在不同状态，时间有不同的样式；

link...链接点击之前；

visited...链接点击之后；

hover...“悬停”

active..."点击不松时

其中顺序是固定好的，link visited hover active；

5.2.1伪元素选择器

：before

：after

：：before

：；after

使用伪元素是必须要加上content属性；

大一不好玩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css的引入以及选择器

1选中某个标签的某个属性表达为标签[属性]{修饰值}；3包含某个值是标签[属性*="包含的值"]{修饰值}；4以某个值开头为标签[属性^="值"]{修饰值}；5以某个值结束为标签[标签$="值"]{修饰值}；6+表示修饰的是下一个标签的为标签+标签{修饰值}；基本选择器包括：标签选择器（通过标签的类型名称获得），ID选择器，类选择器，通用选择器（通配符）其中优先级为ID>class>标签>通配符；3外链样式：link标签的导入，在css中写出对相应的html的修饰在在html中使用link标签进行导入；
复制链接

扫一扫