div+css的入门知识

谁借莪１个温暖的怀抱￠ 2021-09-24 16:56 198阅读 0赞

**目录**

四种选择器

类选择器基本语法

ID选择器基本语法

HTML元素选择器基本语法

通配符选择器基本语法

如何插入样式表

外部样式表

内部样式表

内联样式

行内元素和块元素

--------------------

**CSS特点：实现网页内容与样式的分离**

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

![2020092009324587.jpg][]

## 四种选择器 ##

*  类选择器（class选择器）
 *  id选择器
 *  html元素选择器
 *  通配符选择器

CSS选择器优先级：ID选择器 > 类选择器 > HTML元素选择器body>通配符选择器

### 类选择器基本语法 ###

.类选择器名{
    	属性1：属性值；
    	属性2：属性值；
    	......
    }

### ID选择器基本语法 ###

#id选择器名{
       属性1：属性值；
       属性2：属性值；
       ......
    }

### HTML元素选择器基本语法 ###

某个html元素{
       属性1：属性值；
       属性2：属性值；
       ......
    }

### 通配符选择器基本语法 ###

*{
    	属性1：属性值；
    	属性2：属性值；
    	......
    }

## 如何插入样式表 ##

*  外部样式表
 *  内部样式表
 *  内联样式

### 外部样式表 ###

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

### 内部样式表 ###

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

<head>
    <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>
    </head>

### 内联样式 ###

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

## 行内元素和块元素 ##

*  常见的行内元素有<a> <span> <input type=“XXX”>
 *  常见的块元素有<div> <p>

*  行内元素只占据本身内容的宽度，不占据整行。
 *  块元素不管本身内容，占据整行，换行显示。

[2020092009324587.jpg]: /images/20210923/2af5041bf3014d83b8e2ebee5381bfb2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 152 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 166 阅读

相关 DIVCSS技术如何入门

css是cascading style sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助css的强大功能，网页

我会带着你远行/ 2024年04月03日 09:30/ 0 赞/ 144 阅读

相关 Python的入门知识

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 在数据分析领域，python是一个绕不开的知识和工具，如果不

我会带着你远行/ 2024年03月30日 15:40/ 0 赞/ 92 阅读

相关 Python的入门知识汇集

创建 Python的创始人为Guido van Rossum。1989年圣诞节期间,Guido为了打发圣诞节的无趣，决心开发一个新的脚本解释程序，做为ABC 语言的一种继

短命女/ 2024年03月27日 10:38/ 0 赞/ 123 阅读

相关队列的入门知识

出处：[http://blog.csdn.net/hui12581/article/details/45023197][http_blog.csdn.net_hui12581_

逃离我推掉我的手/ 2022年07月13日 07:13/ 0 赞/ 215 阅读

相关入门知识——Linux入门

1.Linux系统简介：操作系统linux=系统调用和内核 linux本身只是操作系统的内核，内核是使其他程序运行的基础，它实现了多任务和硬件管理，用户和系统管理员

缺乏、安全感/ 2022年04月16日 03:26/ 0 赞/ 461 阅读

相关 TensorFlow入门知识

\----------欢迎加入学习交流QQ群：657341423 安装TensorFlow Windows安装TensorFlow可以下载TensorFlow安装包，[

浅浅的花香味﹌/ 2022年04月04日 05:30/ 0 赞/ 343 阅读

相关 div+css的入门知识

目录四种选择器类选择器基本语法 ID选择器基本语法 HTML元素选择器基本语法通配符选择器基本语法如何插入样式表外部样式表内部样式表内联样式

谁借莪１个温暖的怀抱￠/ 2021年09月24日 16:56/ 0 赞/ 199 阅读

相关 MACD知识入门

百度百科对MACD的定义： MACD称为指数平滑移动平均线，是从双指数移动平均线发展而来的，由快的指数移动平均线（EMA12）减去慢的指数移动平均线（EMA26）得到快

淩亂°似流年/ 2021年07月04日 14:38/ 0 赞/ 517 阅读