慕课网

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

初识HTML(5)+CSS(3)

最热最新

3218005076李子纯

<ul><li>标签
也可使用float:left使它的右边也加一列

查看全部

0 采集收起来源：添加新闻信息列表 - 使用<ul><li>标签实现无序列表
2020-10-31
3218005076李子纯

div和section的区别

查看全部

0 采集收起来源：正文才是重点喔 - <section>定义区段
2020-10-31
3218005076李子纯

<header> 标签定义页眉,<footer> 标签定义页脚
<header> 标签或<footer> 标签定义文档或者文档的一部分区域的页眉或页脚。
<header> 元素应该作为介绍内容或者导航链接栏的容器。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <header> 元素和<footer> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

查看全部

0 采集收起来源：听说开头写的好就能一键三连 - <header>标签定义头部区域
2020-10-31
3218005076李子纯

(1)div用法示例，注意不同位置的不同注释方法

(2)横排分栏（此处不知道为什么没实现成功）
<div >
float：left 让板块按左浮动排列。

(3)学习：别人家代码的div用法

查看全部

2 采集收起来源：我还想diy点样式- 使用<div>标签自定义块
2020-10-31
3218005076李子纯

<ol> 标签定义有序列表。
<ul> 标签定义有序列表。
<li> 标签定义列表项目.
<li>在<ol>和<ul> 里都可用

查看全部

0 采集收起来源：我还想diy点样式- 使用<div>标签自定义块
2020-10-31
3218005076李子纯

h1-h6标签
不写h2标题时也可写h3标题，字体大小h3保持原来大小，跳过h2的大小。

查看全部

0 采集收起来源：做个标题党 - 使用<hx>标签为网页增加标题
2020-10-31
3218005076李子纯

<span>用法:
<span >美国梦</span>,
即可标识美国梦三个字为蓝色，突出它与原文的不同

查看全部

0 采集收起来源：你就是馋人家的身子 - 认识body标签
2020-10-31
3218005076李子纯

href用法(初识html+css 1-7)
<a href="#"></a>实际上是一个假连接，也可以表示为<a href="Javascript"></a>.就是一个空链接，是企业在有些模块没有开发前设计出来的，但是<a href="#"></a>和<a href="Javascript"></a>之间的区别在于一个点击时会跳转到本页面最顶部，而后者不会。<a href="www.baidu,com">点此跳转到百度网址</a>

查看全部

0 采集收起来源：解释不等于掩饰- html文件注释
2020-10-31
冯唐FT
文本样式
text-decoration:
text-decoration默认值为none, 定义标准的文本。
text-decoration的值为underline为定义文本下的一条线。
text-decoration的值为overline为定义文本上的一条线。
text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。
text-indent:为文本添加首行缩进
```
p{text-indent:2em;}
```
line-height:为文字设置行间距
```
p{line-height:1.5em;}
```
letter-spacing ：设置文字间隔或者字母间隔
word-spacing ：英文单词之间的间距
```
h1{
    letter-spacing:50px;
}
```
text-align:设置文本对齐方式
```
h1{
    text-align:center;
}
```
```
h1{
    text-align:left;
}
```
```
h1{
    text-align:right;
}
```
查看全部

0 采集收起来源：长度值
2020-10-30
冯唐FT

设置字体body{font-family:"宋体";}设置字大小body{font-size:12px;}设置字体粗细p span{font-weight:bold;}粗体设置字体样式p{font-style:italic;} 斜体p{font-style:normal;}正常体默认p{font-style:oblique;}倾斜的字体设置字体颜色p{color:red;}p{color:rgb(133,45,200);}p{color:rgb(20%,33%,25%);}p{color:#00ffff;}font样的简写方式body{ font:italic bold 12px/1.5em "宋体",sans-serif;顺序：style weight size/height family,sans-serif 注意：至少要指定 font-size 和 font-family 属性

查看全部

0 采集收起来源：给文本装饰一下 - 使用text-decoration添加文本修饰
2020-12-05
冯唐FT
css3的继承，优先级和重要性
继承：CSS的某些样式是具有继承性的，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。但注意有一些css样式是不具有继承性的。如border:1px solid red;
选择器的优先级
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
权值：
权值高的就使用哪种css样式。
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
例：
```
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*/
```
```
注意：p span.warning{color:purple;} /*权值为1+1+10=12*/
```
（无空格）：p标签下所有class=.warning的所有span标签
（有空格）：p标签下所有span标签下class=warning的所有元素
最高权值：
```
p{color:red!important;}
```
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
查看全部

0 采集收起来源：继承者 - 样式的继承
2020-10-30
BIT_W
CSS样式的继承：继承是一种规则，它允许样式不仅应用于某个特定html标签元素。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，子元素为span标签：
```
<html>
    <head>
        <style type="text/css">
            p{color:red;}
        </style>
    </head>
    <body>
        
       <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
      
    </body>
</html>
```
选择器的优先级：内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
权值计算(特殊)：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
选择器最高层：有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
```
<html>
    <head>
        <style type="text/css">
            p{color:red!important;}
            p{color:green;}
        </style>
    </head>
    <body>
        <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
    </body>
</html>
```
查看全部

0 采集收起来源：为所欲为 - 选择器最高层级!important
2020-10-30
终遇你6817309

单独一个不大的表格就没有太必要的。他这个就是在比较大的表格里作用才大。你可以理解为大表格是一个容器。加了这些thead,tbody,tfoot就是再加了3个小容器。浏览器会优先显示出小容器。不必等跟没有加之前，必须先显示大容器这个大表格在显示其中的内容

查看全部

0 采集收起来源：使用thead、tbody、tfoot定义表格
2020-10-30
终遇你6817309

tr --> table row
th --> table head
td --> table data
<style type="text/css">
这句话相当于我要用CSS

查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2020-10-30

BIT_W

CSS选择器：“选择器”指明了{}中的“样式”的作用对象，也就是“样式”

标签选择器：就是为html代码中的标签设置样式。例如下面代码：

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

就是为p标签设置12px字号，行间距设置1.6em的样式。

类选择器：语法： .类选器名称{css样式代码;}。例如下面代码：

<thml>
    <head>
        <style type="text/css">
             .stress{color:red;}<!--类选择器前面要加入一个英文圆点,表示自己是类选择器-->
        </style>   
    </head>
    <body>
        <span class="stress">胆小如鼠</span>
    </body>
<thml>

ID选择器：使用ID选择器，必须给标签添加上id属性，ID选择符的前面是井号（#）号，例如下面代码：

<thml>
    <head>
        <style type="text/css">
             #stress{color:red;}<!--ID选择器前面要加入一个井号,表示自己是ID选择器-->
        </style>   
    </head>
    <body>
        <span id="stress">胆小如鼠</span>
    </body>
<thml>

ID选择器与类选择器的不同：ID选择器只能在文档中使用一次，而类选择器可以使用多次。

子选择器：即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

<thml>
    <head>
        <style type="text/css">
             .food>li{border:1px solid red;}
        </style>   
    </head>
    <body>
       <ul class="food"><!--此处的food不是为ul添加属性，而是为ul标签中的第一个<li>标签添加属性-->
           <li>水果            
               <ul>                
                   <li>香蕉</li>                
                   <li>苹果</li>                
                   <li>梨</li>            
               </ul>        
           </li>
        </ul>
    </body>
<thml>

后代选择器：加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

<thml>
    <head>
        <style type="text/css">
             .food li{border:1px solid red;}
        </style>   
    </head>
    <body>
       <ul class="food"><!--此处的food不是为ul添加属性，而是为ul标签中的所有的<li>标签添加属性-->
           <li>水果            
               <ul>                
                   <li>香蕉</li>                
                   <li>苹果</li>                
                   <li>梨</li>            
               </ul>        
           </li>
        </ul>
    </body>
<thml>

子选择器与后代选择器的不同：子选择器使用>，只对包裹的一个目标标签生效，后代选择器使用空格，对包裹的所有目标标签生效

通用选择器：作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择器：允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

<thml>
    <head>
        <style type="text/css">
             a:hover{color:red;}<!--鼠标划过时显示为红色-->
             <!--兼容所有浏览器的“伪类选择符”就是 a 标签上使用:hover-->
        </style>   
    </head>
    <body>
        <a href="http://www.imooc.com">胆小如鼠</a>
    </body>
<thml>

标签的分组：多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码：

h1,span{color:red;}

相当于：

h1{color:red;}
span{color:red;}

查看全部

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

2020-10-30

首页上一页 427 428 429 430 431 432 433 下一页尾页

0/150

提交

取消

开始学习

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

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