慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

qq_旁观者的形而上_

三种方法的优先级有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况 1、使用内联式CSS设置“超酷的互联网”文字为粉色。 2、然后使用嵌入式CSS来设置文字为红色。 3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

查看全部

0 采集收起
2018-03-22
qq_旁观者的形而上_

CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码： <p >这里文字是红色。</p> 并且css样式代码要写在双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码： <p >这里文字是红色。</p>

查看全部

0 采集收起
2018-03-22
金藤藤

层叠我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下面代码: p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

查看全部

0 采集收起
2018-03-22
金藤藤

特殊性有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码： p{color:red;} .first{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。下面是权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码： p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/ 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

查看全部

0 采集收起来源：权值计算-特殊性
2018-03-22
qq_莫_1

要想输入空格，必须写入 

查看全部

0 采集收起来源：再加点空格呢 - 使用特殊字符 实现空格标签
2018-03-22
qq_莫_1

语法： xhtml1.0写法： <br /> html4.01写法： <br> 大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。最后一句不要加

查看全部

0 采集收起来源：写代码都不换行么? - 使用<br>标签实现换行效果
2018-03-22
rioru

创建表格的四个元素： table、tbody、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 5、<th>…</th>：表格的头部的一个单元格，表格表头。 6、表格中列的个数，取决于一行中数据单元格的个数。

查看全部

0 采集收起
2018-03-22
金藤藤

分组选择符当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色： h1,span{color:red;} 它相当于下面两行代码： h1{color:red;} span{color:red;}

查看全部

0 采集收起来源：给选择器分个组 - 分组选择器
2015-02-17
rioru

用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。语法： <div id="版块名称">…</div>

查看全部

0 采集收起
2018-03-22
金藤藤

伪类选择符更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色： a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。关于伪选择符：关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏鉴器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

查看全部

0 采集收起来源：伪装者 - 伪类选择器
2015-02-17
金藤藤

包含(后代)选择器包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码： .first span{color:red;} 这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2018-03-22
金藤藤

子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2018-03-22
qq_莫_1

<q>标签，短文本引用网页的文章里想引用某个作家的一句诗，那么<q>标签是你所需要的。注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。

查看全部

0 采集收起
2018-03-22
qq_莫_1

1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。 2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

查看全部

0 采集收起
2018-03-22
qq_莫_1

想在一段话中特别强调某几个文字，就可以用到<em>或<strong>标签。两者在强调的语气上的区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。 <em>的内容在浏览中显示为斜体，<strong>显示为加粗。如果不喜欢这种样式，可以使用css样式去改变它。语法： <em>需要强调的文本</em> <strong>需要强调的文本</strong>

查看全部

0 采集收起
2018-03-22

首页上一页 26432 26433 26434 26435 26436 26437 26438 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。