当前位置:首页 > 前端技术 > CSS样式规则

CSS样式规则

2022年09月17日 08:25:24前端技术6

CSS样式规则

css作用:设置HTML版面的布局和外观的显示样式

一、引入CSS样式表

1、行内式(内联样式)

概念:
称为内样式,行间样式
是通过标签的style属性来设置元素的样式
语法格式:

<标签名 style="属性1:属性值1; 属性2:属性值2;属性3:属性值3;">内容</标签名>
2、内部样式表(内嵌样式表)

概念:
称内嵌式
是将CSS代码集中卸载HTML文档的head头部标签中,并用style标签来定义
语法格式:

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

示例:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h1{
      
            color:green;
            font-size: 10px;
        }
    
    </style>
</head>
3、外部样式表(外链式)

将所有样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式文件链接到HTML文档中
语法格式:

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

注意
link是单标签
link标签需要放在head头部标签中,并且指定link标签的三个属性

属性 作用
rel 定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档是一个样式表文件
type 定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CSS样式表
href 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
4、三种样式表总结
样式表 优点 缺点 使用情况 控制范围
行内样式 书写方便,权重高 没有实现样式和结构分离 较少 控制一个标签
内部样式表 部分结果哟和样式相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多 控制整个站点

样式书写有两种
一种是紧凑型:

h3 {display:block; width: 50px;}

一种是展开格式:

h3 {
		color: deppink;
		font-size: 20px;
}

作者:away.....
来源链接:https://blog.csdn.net/qq_43498002/article/details/108739519

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42446.html

标签: css
分享给朋友:

“CSS样式规则” 的相关文章

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法

1.只针对底部高度固定的情况,不能解决底部高度不固定的情况, 原理:主要内容放在page-main里面,page-container最小高度100%(注意这里html,body高度也要设为100%),position为relative。footer的position为abs...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。