带你了解CSS基础知识,样式
目录
- 什么是CSS
- 在HTML页面中嵌套使用CSS的两种方式
- 三种方式代码展示
- 链入外部样式表文件
- 以下是常用的样式
- 总结
什么是CSS
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
在HTML页面中嵌套使用CSS的两种方式
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。语法格式：
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>
第二种方式：链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）语法格式：
这种方式易维护，维护成本较低。 xxx.css文件 1.html中引入了 2.html中引入了 3.html中引入了 4.html中引入了
三种方式代码展示
内联定义方式
<!doctype html> <html> <head> <title>HTML中引入CSS样式的第一种方式：内联定义方式</title> <head> <body> <!-- width 宽度样式 heght 高度样式 background-color 背景颜色样式 display 布局样式（none表示隐藏，block表示显示） --> <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border-color: red;border-width: 3px;border-style: solid"></div> <!--样式还可以这样写 border: width style color --> <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block; border: thick double yellow; "></div> </body> </html>
样式块方式
<!doctype html>
<html>
<head>
<title>HTML中引入样式的第二种方式：样式块方式</title>
<style type="text/css">
/*
这是CSS的注释
*/
/*
id选择器
#id{
样式名: 样式值；
样式名: 样式值；
样式名: 样式值；
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
标签选择器
标签名{
样式名: 样式值;
样式名: 样式值;
样式名: 样式值;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
类选择器
.类名{
样式名: 样式值;
样式名: 样式值;
样式名: 样式值;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
</style>
</head>
<body>
<!--
设置样式字体大小12px,颜色为红色
-->
<!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起，用户名不能为空！</span>-->
<span id="usernameErrorMsg"">对不起，用户名不能为空！</span>
<div></div>
<div></div>
<div></div>
<!--class相同的可以认为是同一类标签。-->
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
<option>硕士</option>
</select>
</body>
</html>
链入外部样式表文件
css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML中引入CSS样式的第三种方式：链入外部样式表文件</title> <!--引入css--> <link type="text/css" rel="stylesheet" href="css/1.css"/> </head> <body> <a href="http://www.baidu.com">百度</a> <span id="baiduSpan">点击我链接百度</span> </body> </html>
以下是常用的样式
边框
（1）
div{ border : 1px solid red; }
（2）
div{ border-width : 1px; border-style : solid; border-color : red; }
隐藏
div{ display : none; }
字体
div{ font-size : 12px; color : red; }
文本装饰
a{ text-decoration : none; }
a{ text-decoration : underline; }
列表
ul{ list-style-type : none; }
设置鼠标悬停效果
:hover
定位
div{ position : absolute; left : 100px; top : 100px; }
鼠标小手
div{ cursor : pointer; }
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望你能够多多关注我们的更多内容！
相关推荐
-
jQuery 改变CSS样式基础代码
其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: 复制代码 代码如下: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法.示
-
原生JS实现获取及修改CSS样式的方法
本文实例讲述了原生JS实现获取及修改CSS样式的方法.分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一.行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
-
微信小程序 基础知识css样式media标签
微信小程序 基础知识css样式media标签 前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需 在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"
-
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jav
-
解决django后台样式丢失,css资源加载失败的问题
就像这个图的样子: 解决方法,setting.py中DEBUG选项为True,否则无法映射到静态文件目录 以上这篇解决django后台样式丢失,css资源加载失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
带你了解CSS基础知识,样式
目录 什么是CSS 在HTML页面中嵌套使用CSS的两种方式 三种方式代码展示 链入外部样式表文件 以下是常用的样式 总结 什么是CSS CSS(Cascading Style Sheet):层叠样式表语言. CSS的作用是: 修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看. 在HTML页面中嵌套使用CSS的两种方式 第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式.语法格式: <标签 style="样式名:样式值;样式名
-
AngularJS实用基础知识_入门必备篇(推荐)
前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q
-
vue3基础知识剖析
目录 声明 vue3.0有哪些新特性 vue3.0的优缺点 如何解锁vue3.0 体验vue3.0的4中姿势 核心的composition API setup setup语法糖 ref.reactive watch跟watchEffect computed(计算属性) 组件通信 props emit 插槽 vue2中的使用 vue3中的使用 生命周期 vue-router 4.0 Composition API 路由守卫 keep-alive 和 transition 必须用在 router-v
-
CSS的三大样式你了解多少
目录 CSS样式 行内式 内部式 外部式 多重样式优先级 总结 CSS样式 行内式 又叫:内联样式.行内样式.嵌入式样式 <!-- style作为属性直接写在标签后面, style属性可以包含任何 CSS属性 --> <div style="font-size: 40px; color: #FF0000;">我是div</div> <div style="font-size: 40px; color: blue;">我
-
.Net Core 3.1 Web API基础知识详解(收藏)
目录 一.前言 二.Swagger调试Web API 三.配置文件 四.文件上传 五.统一WebApi数据返回格式 六.模型验证 七.日志使用 八.依赖注入 九.缓存 十.异常处理 十一.应用安全与JWT认证 十二.跨域 一.前言 随着近几年前后端分离.微服务等模式的兴起,.Net Core也似有如火如荼之势 ,自16年发布第一个版本到19年底的3.1 LTS版本,以及将发布的.NET 5,.NET Core一路更迭,在部署和开发工具上也都支持了跨平台应用.一直对.Net Core有所关注,但未
-
AngularJS 最常用的八种功能(基础知识)
AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序: <li ng-repeat="person in pers
-
学习shell脚本之前的基础知识[图文]
日常的linux系统管理工作中必不可少的就是shell脚本,如果不会写shell脚本,那么你就不算一个合格的管理员.目前很多单位在招聘linux系统管理员时,shell脚本的编写是必考的项目.有的单位甚至用shell脚本的编写能力来衡量这个linux系统管理员的经验是否丰富.笔者讲这些的目的只有一个,那就是让你认真对待shell脚本,从一开始就要把基础知识掌握牢固,然后要不断的练习,只要你shell脚本写的好,相信你的linux求职路就会轻松的多.笔者在这一章中并不会多么详细的介绍shell脚本
-
Vue 2.0入门基础知识之内部指令详解
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
-
Java基础知识汇总
Java基础知识 1.Java语言的优点: 1)Java是纯面向对象语言 2)与平台无关性,一次编译到处运行 3)Java提供了狠多内置类库 4)提供了对web应用的支持 5)具有较好的安全性(数组边界检测.Bytecode检测)和健壮性(强制型机制.垃圾回收器.异常处理) 6)去除c++难以理解的一些特性(头文件 指针 运算符重载 多重继承) 2.java与c++的异同: 1)Java为解释型语言,c++为编译型语言,java会慢但是跨平台 2)Jave为纯面向对象,c++既面向对象又能面向过