div+css的入门知识

简介: div+css的入门知识

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


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

image.png

四种选择器

类选择器(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>


行内元素只占据本身内容的宽度,不占据整行。


块元素不管本身内容,占据整行,换行显示。


相关文章
|
4天前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
14 0
|
4天前
|
人工智能 前端开发 开发者
「CSS 只要三节课」之入门
「CSS 只要三节课」之入门
6 0
|
4天前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
44 3
|
4天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
4天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
4天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
38 0
|
4天前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
23 0
|
4天前
|
前端开发 搜索推荐 容器
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)
22 0
|
4天前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
16 0
|
4天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
7 0