DIV+CSS基础教程笔记

毛毛爱掉毛

已于 2022-07-25 23:31:02 修改

阅读量2.4k

点赞数 2

分类专栏：编程文章标签： css 前端

于 2022-07-10 18:32:26 首次发布

本文链接：https://blog.csdn.net/sapphire7/article/details/125707747

版权

一、传统页面table来布局和显示数据：

缺点：1）显示样式和数据是绑定的在一起

2）布局的时候，灵活度不高

3）一个页面可能会有大量的<table>元素，代码会冗余

4）增加带宽

5）搜索引擎不喜欢这样的布局

优点：1）理解比较简单

2）不同的浏览器看到的效果一般是相同的

3）显示数据还是很好的

二、div+css

基本思想：数据和样式要分离

div元素是用来为HTML文档内大块的内容提供结构和背景的元素。

css是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色。字体加粗等。

注：div用来存放需要显示的数据/文字/图表等，CSS是用来指定放在div中的内容怎样显示，包括这些内容的位置和外观，从而做到数据和显示相互分离的效果。

三、CSS的样式：

css 样式由选择符和声明组成，而声明又由属性和值组成，如：

p{
    font-size:12px;
    color:blue;
}

其中p为选择符，{ }内为声明；在声明中，font-size为属性，12px为值。

选择符：又称选择器，指明网页中要应用样式规则的元素，如上面的例子将网页中所有的段（p）的文字将变成蓝色，字体大小设置为12px，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。

css中的注释语句：/* 注释语句 */

四、css样式的代码插入形式：

1）内联式

css样式表就是把css代码直接写在现有的HTML标签中（写在元素的开始标签中，值写在style=“”双引号中，多个样式用分号隔开），如：

<p style="color: red; font-size: 12px"> 这里文字是红色。</p>

2）嵌入式

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。例如：

<head>
         <meta charset="UTF-8">
         <title>嵌入式css样式</title>
         <style type="text/css">
         span {
                 color:blue;
         }
         </style>
</head>

3）外部式/外联式

把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如：

<head>
         <meta charset="UTF-8">
         <title>嵌入式css样式</title>
         <link href="style.css" rel="stylesheet" type="text/css" />
</head>

其中rel="stylesheet" type="text/css" 是固定写法不可修改。

4）比较

以上三种方式的优先级：内联式>嵌入式>外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。即<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。

五、选择器

1）标签选择器

标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>等。

2）类选择器

语法： .类选器名称{css样式代码;}

即英文圆点开头，类选择器名称可以任意起名。用法如下：

第一步：使用合适的标签把要修饰的内容标记起来；

<span>类选择器举例</span>

第二步：使用class="类选择器名称"为标签设置一个类；

<span class="example"> 类选择器举例 </span>

第三步：设置类选器css样式；

.example{color:red;}

3）ID选择器

为标签加上id属性，为标签设置id=“ID名称”，而不是class=“类名称”；

ID选择符前面是井号（#），而不是英文圆点（.）。

例如：

<head>
         <style type="text/css">
         #stress {
                  color: red;
         }
         </style>

</head>

<body>
         <span id="stress">ID选择器</span>
</body>

4）类选择器和ID选择器的区别

相同点：可以应用于任何元素

不同点：

4.1）ID选择器只能在文档中使用一次（也就是说，不能为两个不同的元素设置同一个ID选择器）。

例如：如下写法是错误的

<p> 
    <span class="stress">id选择1</span>
    <span class="stress">id选择2</span>
</p>

4.2）可以使用类选择器词列表方法为一个元素同时设置多个样式。

例如：如下写法是正确的

.stress{
    color:red;
}

.bigsize{
    font-size:25px;
}

<p>
    <span class=&

最低0.47元/天解锁文章