css样式引入方式和选择器

最新推荐文章于 2023-12-08 16:51:07 发布

张九日。

最新推荐文章于 2023-12-08 16:51:07 发布

阅读量892

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/chengxuzx/article/details/117527170

版权

1.CSS：

1.1 W3C的介绍：

万维网联盟

W3C，这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。

1.2 CSS的介绍：

层叠样式表

样式表可描述文档如何被显示、发音或打印。CSS 是一种向网页添加样式的机制。

2.层叠样式表：

2.1引入方式：

行内样式

内嵌样式

外链样式

导入样式

2.1.1 行内样式

概念：直接在标签内部通过使用style属性添加CSS样式

<h2 style="color:red">这是行内样式</h2>

基本语法：<标签名 style="属性1:属性值1;属性2:属性值2; 属性3:属性值3; "</标签名>

2.1.2 内嵌样式

概念：是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<style type="text/css">
 </style>

基本语法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>样式表</title>
	<style type="text/css">
    h1
    {
    	color:blue
    }
	</style>
</head>
<body>
	<h1>内嵌样式</h1>
</body>
</html>

2.1.3 外链样式

概念：是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
注意：link标签是在head里不是在style里

基本语法：

（注：link是单标签）

把 css 的样式单独写在 .css 的文件中，通过 link 标签中的 href 属性进行引入

2.1.4 导入样式（一般不用）

导入式也是写在head标签内的style标签，导入样式和链接样式比较相似，采用@import样式导入CSS样式表，
在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

基本语法：

@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>

@import在CSS中使用，如下：
@import url(style.css);

总结：

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离，HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离，页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离，实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便	需要引入	最多	控制整个站点（多）

四种样式表优先级：

当四种样式表有多个同时时候，理论上：行内>内嵌>链接>导入 实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高。

3.CSS选择器

css选择器的作用：如果想要用css为html页面中的元素添加样式，就需要用到css选择器，css设置样式都是通过css选择器进行控制。 css选择器就是用于指向需要css作用的标签，让css样式知道自己需要到那个标签上去。

css语法结构
选择器{
属性:属性的值;
属性:属性的值;
属性:属性的值;
}

3.1 基本选择器

基本语法：HTML元素{属性1：属性值1；属性2：属性值2；...}

1.标签选择器（针对一类标签）

div{
color: blue
}

2.id选择器（针对某一个特定的标签使用）

ID名称站在HTML页面中必须唯一。

基本语法：#id选择器名{属性1：属性值1；属性2：属性值2；...}

#first{
background: yellow
}

3.类选择器（针对你想要的所有标签使用）

基本语法：.类选择器名{属性1：属性值1；属性2：属性值2；...}

说明：类选择器名称的第1个字符不能使用数字;类选择器的优先级高于元素选择器，所以相同属性的样式，类选择器的样式会覆盖元素选择器的样式，

类名在HTML页面中可以重名

.name
{
color: green
}

4.通用选择器（针对所有的标签都适用（不建议使用）

基本语法：*{属性1：属性值1；属性2：属性值2；...}

*{
color: red
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>四种选择器</title>
	<style type="text/css">
/*标签选择器*/ 
      div{
       	color: red
       }
/*id选择器*/
       #zx1{
       	color: blue
       }
/*类选择器*/
       .name{
       	color: green
       }
/*通用选择器*/
       {
       	color: yellow
       }
	</style>
</head>
<body>
	<div id="zx1" class="name">一个标签</div>
	<p id="zx2">二个标签</p>
	<h1 class="name">三个标签</h1>
	<h1 id="zx1">四个标签</h1>
</body>
</html>

3.2四种基本选择器的优先级：id>类>标签>通配符

3.3包含选择器

1.子代选择器（获取某个标签的第一级子标签）
       div.user>ul{
           border-style: solid;
           border-color: green;
       }
2.后代选择器（获取某个标签里的所有子标签）
.user li {
               border-style: solid;
           border-color: red;
}
3.分组选择器（逗号选择器，）
.name,#first,p,h1{
   color: red
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
     <style type="text/css">
    div.c>ul{ 
    	border-style: solid;
        border-color: green; 
    }
    .c li
    {
border-style: solid;
        border-color: red;
}
    #zx1,.b,h1
{
	color:yellow;
}
     </style>
</head>
<body>
		<div id="zx1" class="a">第一个标签</div>
		<h1 id="zx2">第二个标签</h1>
		<p class="b">第三个标签</p>
		<div class="a">第四个表签</div>
		<hr>
		<div class="c">
			<ul>
				<li>张旭</li>
				<li>张旭</li>
				<li>张旭</li>
				<li>张旭</li>
			</ul>
			<li>张旭</li>
			<li>张旭</li>
			<li>张旭</li>
			<li>张旭</li>
			<li>张旭</li>
		</div>
</body>
</html>

3.4属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
/*某个标签里的某个属性值*/
.container[class]{
	color: red
}
div[title]
{
  color: red
}
/*准确到某一个值*/
input[type*="e"]
{
color: red
}
/*以什么为开始*/
input[type^="e"]
{
	color: blue
}
/*以什么为结尾*/
input[type$="e"]
{
	color: green
}
/*表示下一个标签*/
.zx1+p
{
	color: yellow
}
          /*属性名称可以等于某一个值*/
         [title="这是一个标题"] 
         {
         	color: green
         }

	</style>
           
</head>
<body>
	<div class="container">这是一个div</div>
	<div title="这是一个标题">第二个div</div>
	<input type="text" name="" id="" value="张三">
	<input type="email" name="" id="" value="李四">
	<input type="url" name="" id="" value="王五">
	<hr>
	<div class="zx1">第三个div</div>
    <p id="zx2">这是一个段落</p>
</body>
</html>

3.5 伪选择器

伪选择器是一种特殊的选择器，它分为伪类选择器和伪对象选择器2种。

3.5.1 伪类选择器

:link	链接点击之前
:visited	链接点击之后
:hover	悬停
:active	激活
:focus	某个标签获得焦点

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

这四种状态顺序不可以改变
link--visited--hover---active

所有 CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类</title>
	<style type="text/css">
     a:link
     {
     	color: red
     }
     a:visited
     {
     	color: green
     }
     a:hover{
     	color:yellow
     }
     a:active
     {
     	color: blue
     }
	</style>
</head>
<body>
	<a href="#">点我</a>
</body>
</html>

3.6 css伪元素选择器

::first-line

“first-line”伪元素用于向文本的首行设置特殊样式。

::first-letter

“first-letter”伪元素用于向文本的首字母设置特殊样式，不过这个主要运用于段落排版上多，比如说首字下沉。

::before

“:before” 伪元素可以在元素的内容前面插入新内容，一般配合“content”使用。

::after

:after”伪元素可以在元素的内容之后插入新内容

::selection

改变浏览网页选中文的默认效果

4.CSS中常见样式

4.1控制字体

设置字号-------font-size:12px
设置字色-------color:red
设置字体-------font-family:' 宋体' (中文要加引号)
设置行高-------line-height: 150% 1.5em
设置字体粗细-- font-weight:normal(正常) bold(粗体

单位：em，px

p
{
    font-size:20px;
    color:red;
    font-family:'宋体';
    line-height: 150%;
    font-weight: bold;
}

4.2样式特点

1.继承
网页中的子元素会继承父元素样式

2.层叠性
如果子元素定义了和父元素相同的样式，子元素的样式会覆盖掉父元素的样式
后面定义的样式会覆盖掉前面的样式

4.3控制文本

设置对象中文文本缩进------text-indent:2em(取负数)

文本水平对齐的方式------text-align:left right center

对象空白处的处理-----white-space:normal(自动换行)pre（换行或者是空白受保护）nowrap(强制在同一行显示)

文本大小写的控制------text-transform：none（正常大小） capitalize（文本中的每个单词以大写字母开头）
uppercase（定义仅有大写字母） lowercase（定义无大写字母，仅有小写字母）inherit（规定应该从父元素继承 text-transform 属性的值。）

p
{
   text-indent: 2em;
   text-align: center;
   white-space: nowrap;
   text-transform: capitalize;
}
4.4border边框

border:1px solid red ----1像素红实线红边框
border-image 图片边框
border-width 规定边框的宽度
border-style 规定边框的样式
border-color 规定边框的颜色
border-top（left right center-with（color style）
border-radius 向元素添加圆角边框
inherit 规定应该从父元素继承 border 属性的设置。

4.5外边距（允许负值）

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-lft

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

margin:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

4.2.6内边距

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

padding:10px 5px 15px 20px;

上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

张九日。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式引入方式和选择器

1.CSS的介绍：1.1 W3C的介绍：W3C，这个建立于 1994 年的组织，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。1.2
复制链接

扫一扫

css样式引入方式和选择器

1.CSS：

1.1 W3C的介绍：

1.2 CSS的介绍：

2.层叠样式表：

2.1引入方式：

2.1.1 行内样式

2.1.2 内嵌样式

2.1.3 外链样式

2.1.4 导入样式（一般不用）

总结：

四种样式表优先级：

3.CSS选择器

3.1 基本选择器

3.3包含选择器

3.4属性选择器

3.5 伪选择器

3.5.1 伪类选择器

所有 CSS 伪类

所有 CSS 伪元素

3.6 css伪元素选择器

::first-line

::first-letter

::before

::after

::selection

4.CSS中常见样式

“相关推荐”对你有帮助么？