如何使用css

如何在HTML页面中添加CSS：

使用style属性：在元素中直接指定CSS样式，可以使用style属性来定义，称为内联样式。

<h1 style="text-decoration:underline;">标题一</h1>

使用style元素：style元素定义在head元素中，如果样式需要在页面中多次使用，可以定义在style元素中。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分组</title>
<style>h1{text-decoration:underline;color:#6F0;}
</style>
</head><body><h1>标题一</h1><h1>标题二</h1>
</body>
</html>

使用外部样式表文件：在head元素中添加link元素可以引用外部样式表文件，其rel属性指定引用文件的类型，href属性指定引用文件的属性。

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

另一种使用外部样式文件的方法是在style元素中使用@import指令，如下面的代码：

<style>@import url(https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css);
</style>

选择器

选择器的功能是指定应用样式的元素。

基本选择器：元素类型选择器，使用元素名称定义；ID选择器，格式为“#<ID值>”；类选择器，使用圆点（.）定义，格式为“.<类名>”。
层次选择器：页面中，所有的元素会形成一个树状结构，我们可以通过层次选择器关联相应的元素。下级元素选择器，使用空格；直接下级元素选择器，使用大于号（>）；同级相邻元素选择器，使用加号（+）；同级元素选择器，使用波浪号（~）。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>a{color:red;}div a{text-decoration:underline;color:#3F0;}
</style>
</head><body><a>链接一</a><div><a>链接二</a></div>
</body>
</html>

属性选择器：判断元素中是否定义了某个属性时，可以在选择器后使用一对中括号定义元素属性相关的信息。如果需要判断具体的属性值，可以使用=运算符。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>a[title]{color:red;}
</style>
</head><body><a href="https://www.baidu.com/" title="1">链接一</a>
</body>
</html>

伪类选择器：

:link伪类	未访问过的链接
:visited伪类	已访问过的链接
:hover伪类	当鼠标悬停在元素上的时候
:focus伪类	当前焦点元素
:active伪类	激活元素

伪元素选择器：伪元素选择器更多用于文本样式的定义。

:first-letter	第一个字符
:first-line	第一行
:before	指定内容之前
:after	指定内容之后

通配符选择器：*符号作为通配符

<style>* {margin:0px;padding:0px;}
</style>

CSS叠层样式表（一）相关推荐

CSS叠层样式表（三）
CSS叠层样式表(三) 文档流 display和visibility属性定位浮动背景文档流 display和visibility属性 display属性定义了元素的基本显示方式,它的常用值包括 ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
CSS三种样式表：行内样式表、内部样式表、外部样式表
目录一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比三.CSS样式表规则一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
CSS三种样式表内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表内嵌式:将CSS代码集中 ...
CSS三种样式表（内部样式表、行内样式表、外部样式表）
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...
[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
html中的样式重置,CSS如何重置样式表？
重置样式表的目标是减少浏览器在默认行高,边距和标题字体大小等方面的不一致性:重置样式经常出现在CSS框架中,最初的"meyerweb重置"也出现在Blueprint中. 这里给出的 ...
CSS三种样式表及其使用（内部样式表，行内样式表，外部样式表）
1.内部样式表内部样式表是将CSS代码写在HTML文档的head标签中,并且用style标签定义 <head> <style type="text/css" ...
css叠层_css z-index层重叠顺序
div css z-index层重叠顺序 DIV层.span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSSz-index使用.接下来divcss5介绍z-ind ...

CSS叠层样式表（一）

CSS叠层样式表（一）

如何使用css

选择器

CSS叠层样式表（一）相关推荐

最新文章

热门文章