在HTML中使用css的方法以及选择器类型

最新推荐文章于 2021-06-15 22:37:04 发布

Amber²

最新推荐文章于 2021-06-15 22:37:04 发布

阅读量744

点赞数

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

本文链接：https://blog.csdn.net/weixin_44705186/article/details/108568606

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在HTML中使用css的方法

内嵌样式

这种css一般位于HTML文件的头部，即<head></head>标签内，并且以<style>开始，以</style>结束。内嵌样式允许在它们所应用的HTML文档的顶部设置样式，然后在整个HTML文件中直接调用该样式，这些定义的样式就应用到页面了
基本语法：

<style type="text/css">
选择符1 {
	样式属性:属性值;
	样式属性:属性值;
}
选择符2 {
	样式属性:属性值;
	样式属性:属性值;
}
</style>

例如：

<head>
<style type="text/css">
    body {
          margin-left:0px;
          margin-top:0px;
          margin-right:0px;
          margin-bottom:0px;
         }
   .style1 {
          color:#ffee44;
          font-size:14px;
         }
</style>
</head>

行内样式（内联样式）

行内样式是混合在HTML标记里使用的，用这种方法，可以很简单地对某个元素单独定义样式。行内样式的使用是直接在HTML标记里添加style参数，而style参数的内容就是css的属性和值，在style参数后面的引号里的内容相当于在样式表大括号里的内容。
基本语法：

<标记 style="样式属性:属性值;样式属性:属性值;">

例如：

<table style="color:red;margin-right:120px;">

链接样式

链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，这种方法最适合大型网站的css样式定义。
基本语法：

<link type="text/css" rel="stylesheet" href="外部样式表的文件名称">

例如：

<head>
<link rel="stylesheet" type="text/css" href="slstyle.css">
</head>

导入样式

导入外部样式是指在内部样式表的<style>里导入一个外部样式表，导入时用@import
基本语法：

<style type="text/css">
	@import url("外部样式表的文件名称");
</style>

例如：

<head>
<style type="text/css">
	@import "style.css";
</style>
</head>

优先级问题

4种样式的优先级别是（从高至低）：行内样式、内嵌样式、链接外部样式、导入样式

选择器类型

标签选择器

标签选择器是直接将HTML标签作为选择器，可以是p、h1、strong等HTML标签
例如：

p {
   font-size:14px;
   color:093;
}

类选择器

类选择器能够把相同的元素分类定义成不同的样式，对XHTML标签均可以使用“class=""”的形式对类进行名称指派。定义类型选择器时，在自定义类的名称前面要加一个“.”号
例如：

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>class选择器</title>
      <style type="text/css">
         .red{color:red;font-size:18px;}
         .green{color:green;font-size:20px;}
      </style>
</head>
<body>
      <p class="red">class选择器</p>
      <p class="green">class选择器</p>
      <h3 class="green">h3同样使用</h3>
</body>
</html>

ID选择器

在HTML页面中ID参数指定了某一元素，ID选择器是用来对这个单一元素定义单独的样式。在定义ID选择器时，要在ID名称前加上“#”号
例如：

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>ID选择器</title>
      <style type="text/css">
         #one{
         }
         #two{
              font-size:30px;
              color:#009900;
         }
      </style>
</head>
<body>
      <p id="one">ID选择器1</p>
      <p id="two">ID选择器2</p>
      <p id="two">ID选择器3</p>
      <p id="one two">ID选择器4</p>
</body>
</html>

限定式选择器

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>限定式选择器</title>
      <style type="text/css">
           div#mydiv{backgroud-color:red;}
           p.myclass{backgroud-color:bule;}
      </style>
</head>
<body>
      <div class="mydiv"></div>
      <p id="myclass"></p>
</body>
</html>

后代选择器

<!doctype html>
<html>
<head>
      <meta charset="utf-8">
      <title>后代选择器</title>
      <style type="text/css">
           div #mydiv{backgroud-color:red;}
           div p{background-color:green;}
           p .myclass{backgroud-color:bule;}
      </style>
</head>
<body>
      <div>
           <p class="mydiv"></p>
           <p>
               <p id="myclass"></p>
           </p>
      </div>
</body>
</html>

并集选择器

h1,span#myspan,.myclass{……}

通配符选择器

*{……}

Amber²

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在HTML中使用css的方法以及选择器类型

在HTML中使用css的方法内嵌样式这种css一般位于HTML文件的头部，即<head></head>标签内，并且以<style>开始，以</style>结束。内嵌样式允许在它们所应用的HTML文档的顶部设置样式，然后在整个HTML文件中直接调用该样式，这些定义的样式就应用到页面了基本语法：<style type="text/css"><!--选择符1 （样式属性：属性值；样式属性：属性值；……）选择符2 （样式属性：属性值；样
复制链接

扫一扫

专栏目录