html h 好看的样式,html5 中有关 css3 样式

淡淡的烟草味﹌ 2022-10-10 02:33 158阅读 0赞

html5 中有关 css3 样式

外部式 CSS 样式 (也可称为外联式) 就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以. css 为扩展名,

在 < head > 内 (不是在 < style > 标签内) 使用 < link > 标签将 css 样式文件链接到 html 文件内, 如下面代码:

注意:

1.css 样式文件名称以有意义的英文字母命名, 如 main.css

2.rel="stylesheet" type="text/css" 是固定写法不可修改

3. 标签位置一般写在 < head > 标签之内

对于同一个元素我们同时用了三种方法设置 css 样式, 优先级:

1. 使用内联式 CSS(如在段落中对个别词使用 span 标签进行强调 < span style = "color:red">)设置

2. 然后使用嵌入式 CSS(在 < style > 标签内)来设置

3. 最后又使用外部式设置文字为蓝色(link 链接到的 style.css 文件中设置)

外部样式 < link href="style.css" ...>代码如果在嵌入式样式 < style type="text/css">... 代码的前面(实际开发中也是这么写的)

就是外部样式的优先级大于嵌入式的优先级;

把它们调换顺序, 他们的优先级变化

其实总结来说, 如果三种方式都设置了不同的样式, 采取 ------ 就近原则(离被设置元素越近优先级别越高)

style 样式中的选择器:

每一条 css 样式声明 (定义) 由两部分组成, 形式如下:

选择器\{

样式;

\}

在 \{\} 之前的部分就是选择器, 选择器指明了 \{\} 中的样式的作用对象, 也就是样式作用于网页中的哪些元素

如: body\{

\}

标签选择器其实就是 html 代码中的标签如右侧代码编辑器中的 < html>

#  #

例如下面代码:

p\{font-size:12px;line-height:1.6em;\}

上面的 css 样式代码的作用: 为 p 标签设置 12px 字号, 行间距设置 1.6em 的样式

类选择器在 css 样式编码中是最常用到的, 用 class 属性设置 (span class = "变量名", 变量名在 style 标签内设置) 如下面代码编辑器中的代码: 可以实现为胆小如鼠勇气字体设置为红色

语法:

. 类选器名称\{css 样式代码;\}

1. 英文圆点开头

2. 其中类选器名称可以任意起名(但不要起中文)

使用方法:

第一步: 使用合适的标签把要修饰的内容标记起来, 如下:

胆小如鼠

第二步: 使用 class="类选择器名称" 为标签设置一个类, 如下:

胆小如鼠

第三步: 设置类选器 css 样式,

如下:

.stress\{color:red;\}/ 类前面要加入一个英文圆点 /

例子:

认识 html 标签

.stress\{

color:red;

\}

# 勇气 #

三年级时, 我还是一个 < span class="stress">胆小如鼠 的小女孩, 上课从来不敢回答老师提出的问题, 生怕回答错了老师会批评我

就一直没有这个 < span class="stress">勇气 来回答老师提出的问题学校举办的活动我也没勇气参加

到了三年级下学期时, 我们班上了一节公开课, 老师提出了一个很简单的问题, 班里很多同学都举手了, 甚至成绩比我差很多的, 也举手了,

还说着:"我来, 我来" 我环顾了四周, 就我没有举手

来源: http://www.qdfuns.com/article/49321/d735f69c9704eb768c675fe90bfb7a2f.html

发表评论取消回复

表情：

评论列表（有 0 条评论，158人围观）

还没有评论，来说两句吧...

相关阅读

相关好看样式网页图标的设计（html+css）

html: <!doctype html> <html> <head> <meta charset="utf-8">

港控/mmm°/ 2023年01月08日 02:21/ 0 赞/ 166 阅读

相关 html h 好看的样式,html5 中有关 css3 样式

html5 中有关 css3 样式外部式 CSS 样式 (也可称为外联式) 就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以. css 为扩展名,

淡淡的烟草味﹌/ 2022年10月10日 02:33/ 0 赞/ 159 阅读

相关 html5简单样式css3.0

![Center][] 代码实现： <meta charset="utf-8" > <div id="div1"> 程序员爱情观：爱情就是死循环，

ゝ一世哀愁。/ 2022年09月24日 05:13/ 0 赞/ 130 阅读

相关 html5-css样式

案例效果： ![Center][] 样式实现： div{ width:400px;height:400px; border: 2

ゝ一纸荒年。/ 2022年08月21日 11:56/ 0 赞/ 140 阅读

相关 HTML中样式CSS控制基础

HTML中样式CSS控制基础 <table style=""> <tbody> <tr> <td colspan="1" style="b

水深无声/ 2022年07月21日 01:58/ 0 赞/ 176 阅读

相关 html_css字体样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s

Dear 丶/ 2022年06月18日 05:19/ 0 赞/ 217 阅读

相关 HTML样式- CSS

http://[blog.csdn.net/pipisorry/article/details/78929649][blog.csdn.net_pipisorry_articl

布满荆棘的人生/ 2022年06月02日 01:29/ 0 赞/ 149 阅读

相关好看的table css样式

原文出处：[https://blog.csdn.net/hello\_mr\_anan/article/details/70257627?locationNum=3&fps=1

我会带着你远行/ 2022年05月15日 08:10/ 0 赞/ 869 阅读

相关 html中css样式的优先级规则

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高

╰半夏微凉°/ 2022年04月14日 04:05/ 0 赞/ 509 阅读

相关好看html表格table样式

<style type="text/css"> table{ border-collapse:collapse; tabl

悠悠/ 2021年11月09日 23:34/ 0 赞/ 3313 阅读