HTML基础-div与css概述

chain_xx_wdm

什么是div

<div></div>是html一个普通标签, 进行区域划分
特点

  • 独自占一行
  • 独自不能实现复杂效果, 必须结合CSS样式进行渲染
行级元素行内元素
<div><span>
<!--
    div标签: 块标签, 行级元素, 会占html一行
-->
<div> div中的数据 </div> div之外的数据 <br/>

<!--
    span标签: 块标签, 行内元素, 不会占一行
-->
<span> span中的数据 </span> span外的数据

CSS介绍

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩,布局更加灵活自如。

简单理解:
CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。

  • 样式: 给HTML标签添加需要显示的效果
  • 层叠: 使用不同的添加方式, 给同一个HTML标签添加样式. 最后所有的样式都叠加到一起, 共同作用于该标签

CSS样式规则

image.png

  • 选择器: 用于指定CSS样式的HTML标签 花括号内是对该对象设轩的具体样式
  • 属性: 对指定的对象设置的样式属性. 如字体大小,文本颜色等
  • 属性属性值以"键值对"的形式出现
  • 属性属性值用英文冒号" : "分开
  • 多个"键值对"之间用英文分号" ; "进行区分
<style>
    h2 {
        color: red;
        font-size: 100px;
    }
</style>

注意事项

  • CSS样式"选择器"严格区分大小写. 属性和属性值不区分大小写
  • 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略.但是,为了便于增加新样式, 最好保留
  • 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号
    p{ font-family:"Times New Roman";}
  • 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释
    /* 这是CSS注释文本, 不会显示在浏览器窗口中 */
  • 属性的值和单位之间是不允许出现空格的, 否则浏览器解析时会出错.
    h1 {font-size:20 px} /* 20和单位px之间有空格 */

引入CSS样式

CSS使用非常灵活. 既可以嵌入在HTML文档中, 也可以是一个单独的文件. 
如果是单独的文件, 则必须以.css为扩展名

CSS和HTML的结合有以下3种常用方式

行内样式

行内样式, 是通过标签的style属性来设置元素的样式
<!-- 方式1: 行内样式
    color: 表示字体颜色
    font-size: 表示字体大小
-->
<h3 style="color:gold;font-size:30px">我是应用行内CSS样式的三级标题</h3>

image.png

内部样式

内部样式又称为内嵌式, 是将CSS代码集中写在HTML文档的<head>头部标签体中, 使用<style>标签定义
  • 给当前html文件中的多个标签设置样式
  • 在html的head标签中使用<style>标签来定义CSS
<style>

h2 {
    /* 修饰h2标签 */
    width: 400px;
    height: 200px;
    background-color:bisque;
}
</style>

<body>
    <h2>我是二级标题,我要用CSS啦</h2>
</body>

image.png

内嵌式CSS样式只对其所在的HTML页面有效, 可以对多处标签统一设置样式.因此, 仅设计一个页面时, 使用内嵌式是个不错的选择.
但如果是一个网站, 不建议使用这种方式, 因为它不能充分发挥CSS代码的重用优势

外部样式

外部样式又称为链入式, 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中, 通过link标签将样式链接到HTML文档中
<!-- 方式3: 外部样式
    rel="stylesheet" 固定值,当前文件和引入文件的关系.rel是relationship的缩写, stylesheet是样式表
    type="text/css" 固定值,表示浏览器解析方式
    href 表示css文件位置
-->
<link rel="stylesheet" type="text/css" href="css/mycss01.css">

链入式最大的好处是,同一个CSS样式表可以被不同的HTML页面链接使用, 同一个HTML页面也可以通过多个<link>标记链接多个CSS样式表

三种方式的优先级

行内样式 > 内部样式|外部样式 (谁写在后面就使用谁, 后面的会覆盖前面的)

阅读 261

chain_xx_wdm的前端小基础
1.领养代替买卖2.关于前端的技能点3.微博@-納是大大大大大太阳啊-

1.领养代替买卖

55 声望
0 粉丝
0 条评论
你知道吗?

1.领养代替买卖

55 声望
0 粉丝
宣传栏