前端系列之CSS基础知识概述

时间:2022-09-16 16:00:57

1、什么是DIV

(1)、div就是html一个普通标签,进行区域划分。特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。

(2)、div通常其是块级元素

(3)、div是定义文档中的分区或节(division/section)。

(4)、div标签是以把文档分割为中立的、不同的部分。它可以用作严格的组织工具,并且不使用任f可格式与其关联。

(5)、如果用id或class来标记div,那么该标签的作用会殳得更加有效。

2、什么是CSS

(1)、css通常称为css样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。

(2)、css可以是HTML页面更好看,css色系的搭配可以让用户更舒服,CSS+DIV布局更佳灵活,更容易绘制出用户需要的结构。

(3)、css (Cascading style Sheets):指层叠样式表样式,给HTML标签添加需要显示的效果。

3、CSS样式规则

(1)、使用HTML时,需要遵从一定的规范。css亦如此,要想熟练的使用css对网页进行修饰,首先需要了解css样式规则。具体格式如下
选择器{属性1:属性值;属性2:属性值;…}

(2)、在上面的样式规则中,“选择器”用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现,使用英文冒号“:”分隔。多个属性之间使用英文分号“;"分隔。

4、CSS样式规则举例及阐述

(1)、举例:

<style>
h2{
color:red;
font-size:100px;
}
</style>

(2)、在书写css样式时,除了要遵循css样式规则,还必须注意css代码结构中的几个特点,具体如下:

1)、css样式“选择器”严格区分大小写,“属性”和“属性值”不区分大小写。

2)、 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。

3)、如果属性的值山多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。例如:

p{font-family:“Times New Roman”}

4)、在编写css代码时,为了提高代码的可读性,通常会加上css注释,例如:

/ *这是css注释文本,此文本不会显示在浏览器窗口中* /

5)、在css代码中空格是不被解析的,花括号以及分号前后的空格可有可无。因此,可以使用空格键、Tab键、回车键等对样式代码进行排版,即所谓的格式化css代码,这样可以提高代码的可读性。例如:

h1{font-size:20px;color:red;}
h1{
font-size:20px;
color:red;
}

6)、上述两段代码所呈现的效果是一样的,但是,第二种书写方式的可读性更高。需要注意的是,属性的值和单位之间是不允许出现空格的,否则浏览器解析时会出错。例如,下面这行代码就是不正确的:

h1{font-size:20 px;}/*20和单位px之间有空格,所以解析会错误*/

5、引入CSS样式

css使用非常灵活,及可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以*.css为扩展名。css和HTML的结合3种常用方式:

(1)、行内样式:是通过标签的style属性来设置元素的样式。行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展示结构、css显示效果)相分离,所以一般很少使用。学习阶段有时候为了快速编程,偶有使用。

<!-- 方式1:行内样式
color:表示字体颜色
font-size:表示字体大小
-->
<a style="color:#f00;font-size:30px;"></a>

(2)、内部样式:又称为内嵌式,是将css代码集中卸载HTML文档的head头部标签体中,并且使用
style标签定义。

<!-- 方式2:内部样式
background-color:表示背景色
-->
<style type="text/css">
body{
background-color:#ddd;
}
</style>

(3)、外部样式:外部样式又称为链入式,是将所有的样式放在一个或多个以 .css为扩展名的外部样式表文件中,通过标签将样式连接到HTML文档中。

<!--方式3:外部样式
rel="stylesheet' ,固定值,表示样式表
type="text/css', 固定值,表示css类型
href,表示css文件位置
font-family表示使用的字体系列,多个字体使用逗号分隔。例如:“字体1,字体2,字体3 ",此时优先使用“字体1 ”,如果“字体1 ”系统不存在,再使用“字体2 ”,以此类推。
-->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>

6、CSS几种选择器

(1)、元素选择器:标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的css样式。其基本语法格式如下:

标记名{属性1:属性值属性2:属性值2;属性3:属性值3;}

该语法中,所有的HTML标记名都可以作为标记选择器,例如body、h1、p、strong。用标记选择器定义的样式对页面中该类型的所有标记都有效。例如:

<h1>指南者</h1>
h1{
color:#F00;
font-size:50px;
}

注意:标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。

(2)、ID选择器:ID选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的Id值是唯一的,只能对应于文档中某一个具体的元素。例如:

<h1 id="demo">指南者</h1>
#demo{
color:#0F0;
}

(3)、类选择器:类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

类名{属性1:属性值属性2:属性值2;属性3:属性值3;}

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。例如:

<h1 class="demo">指南者</h1>
.demo{
font-size:25px;
}

注意:类选择器的高级用法:给指定的标签设置class样式:

标签·类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

(4)、属性选择器:属性选择器,在标签后面使用中括号标记,其基本语法格式如下:

标签名标签属性:['标签属性值' ] {属性1:属性值1;属性2:属性值2;属性3:属性值3;

该选择器,是对“元素选择器”的扩展,对一组标签进一步过滤。例如:

<style>
input[type="text"]{
background-color:red;
}
input[type="password"]{
background-color:black;
}
</style>

(5)、包含选择器:两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式。

父标签后代标签{属性1:属性值属性2:属性值2;属性3:属性值3;}

该选择器,是对“元素选择器”的扩展,对一个标签内部所有后代标签进行过滤。例如:

<style>
#demo div{
color:red;
}
</style>

7、CSS样式

(1)、边框和尺寸:borden widtln height

1)、border:设置边框的样式 0 格式:宽度样式颜色。例如:

style="border:lpx solid #f00"表示1像素实边红色。

样式取值:solid实线,none无边,double双线等

2)、width、height:用于设置标签的宽度、高度。例如:

<style>
div{
border:1px solid #000;
width:200px;
height:200px;
}
</style>

(2)、布局:float clear

(1)、通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动。

选择器{float:属性值}

常用属性值:

left:元素向左浮动 
right:元素向右浮动
none:元素不浮动(默认值)

(2)、由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动。

选择器{clear:属性值;}

常用属性值:

left:不允许左侧有浮动元素(清除左侧浮动的影响)
right:不允许右侧有浮动元素(清除右侧浮动元素)
both:同时清除左右侧浮动的影响

(3)、转换:display

1)、HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块标签和行内标签。

块标签:以区域块方式出现。每个块标签独自占据一整行或多整行。

常见的块元素:hl、div、ul等

行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显小。

常见的行内元素:span、a等

2)、在开发中,希望行内元素具有块元素的特性,需要使用display进行转换选

择器器{ display:属性值}

常用的属性值:

inline:此元素将显示为行内元素(行内元素默认的display属性值) 
block:此元素将显为块元素(块元素默认的display属性值)
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。
none:此元素将被隐藏,不显示,也不占用页面空间。

(4)、字体:color font-size

color:颜色,字体颜色

(5)、背景色:background-color

8、CSS盒子模型

(1)、什么是盒子模型

css框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。

(2)、内边距:padding

如果您希望所有hi元素的各边都有10像素的内边距,例如:还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以佼用不同的单位或白分比值:

单边内边届性:
通过使用下面四个单忡的属性,分别设置上、右、下、左内边距:
padding-top、paddinq-riqht、paddinq-bottom、paddinq-left

(3)、边框:border

border-top、border-right、border-bottom、border-left

(4)、外边距:margin

margin-top、margin-right、margin-bottom、margin-left

1、什么是DIV

(1)、div就是html一个普通标签,进行区域划分。特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。

(2)、div通常其是块级元素

(3)、div是定义文档中的分区或节(division/section)。

(4)、div标签是以把文档分割为中立的、不同的部分。它可以用作严格的组织工具,并且不使用任f可格式与其关联。

(5)、如果用id或class来标记div,那么该标签的作用会殳得更加有效。

2、什么是CSS

(1)、css通常称为css样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外观显示样式。

(2)、css可以是HTML页面更好看,css色系的搭配可以让用户更舒服,CSS+DIV布局更佳灵活,更容易绘制出用户需要的结构。

(3)、css (Cascading style Sheets):指层叠样式表样式,给HTML标签添加需要显示的效果。

3、CSS样式规则

(1)、使用HTML时,需要遵从一定的规范。css亦如此,要想熟练的使用css对网页进行修饰,首先需要了解css样式规则。具体格式如下
选择器{属性1:属性值;属性2:属性值;…}

(2)、在上面的样式规则中,“选择器”用于指定css样式作用的HTML对象,花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现,使用英文冒号“:”分隔。多个属性之间使用英文分号“;"分隔。

4、CSS样式规则举例及阐述

(1)、举例:

<style>
h2{
color:red;
font-size:100px;
}
</style>

(2)、在书写css样式时,除了要遵循css样式规则,还必须注意css代码结构中的几个特点,具体如下:

1)、css样式“选择器”严格区分大小写,“属性”和“属性值”不区分大小写。

2)、 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。

3)、如果属性的值山多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号。例如:

p{font-family:“Times New Roman”}

4)、在编写css代码时,为了提高代码的可读性,通常会加上css注释,例如:

/ *这是css注释文本,此文本不会显示在浏览器窗口中* /

5)、在css代码中空格是不被解析的,花括号以及分号前后的空格可有可无。因此,可以使用空格键、Tab键、回车键等对样式代码进行排版,即所谓的格式化css代码,这样可以提高代码的可读性。例如:

h1{font-size:20px;color:red;}
h1{
font-size:20px;
color:red;
}

6)、上述两段代码所呈现的效果是一样的,但是,第二种书写方式的可读性更高。需要注意的是,属性的值和单位之间是不允许出现空格的,否则浏览器解析时会出错。例如,下面这行代码就是不正确的:

h1{font-size:20 px;}/*20和单位px之间有空格,所以解析会错误*/

5、引入CSS样式

css使用非常灵活,及可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以*.css为扩展名。css和HTML的结合3种常用方式:

(1)、行内样式:是通过标签的style属性来设置元素的样式。行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展示结构、css显示效果)相分离,所以一般很少使用。学习阶段有时候为了快速编程,偶有使用。

<!-- 方式1:行内样式
color:表示字体颜色
font-size:表示字体大小
-->
<a style="color:#f00;font-size:30px;"></a>

(2)、内部样式:又称为内嵌式,是将css代码集中卸载HTML文档的head头部标签体中,并且使用
style标签定义。

<!-- 方式2:内部样式
background-color:表示背景色
-->
<style type="text/css">
body{
background-color:#ddd;
}
</style>

(3)、外部样式:外部样式又称为链入式,是将所有的样式放在一个或多个以 .css为扩展名的外部样式表文件中,通过标签将样式连接到HTML文档中。

<!--方式3:外部样式
rel="stylesheet' ,固定值,表示样式表
type="text/css', 固定值,表示css类型
href,表示css文件位置
font-family表示使用的字体系列,多个字体使用逗号分隔。例如:“字体1,字体2,字体3 ",此时优先使用“字体1 ”,如果“字体1 ”系统不存在,再使用“字体2 ”,以此类推。
-->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>

6、CSS几种选择器

(1)、元素选择器:标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的css样式。其基本语法格式如下:

标记名{属性1:属性值属性2:属性值2;属性3:属性值3;}

该语法中,所有的HTML标记名都可以作为标记选择器,例如body、h1、p、strong。用标记选择器定义的样式对页面中该类型的所有标记都有效。例如:

<h1>指南者</h1>
h1{
color:#F00;
font-size:50px;
}

注意:标记选择器最大的优点是能快速为页面中同类型的标记统一样式,同时这也是他的缺点,不能设计差异化样式。

(2)、ID选择器:ID选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的Id值是唯一的,只能对应于文档中某一个具体的元素。例如:

<h1 id="demo">指南者</h1>
#demo{
color:#0F0;
}

(3)、类选择器:类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

类名{属性1:属性值属性2:属性值2;属性3:属性值3;}

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。例如:

<h1 class="demo">指南者</h1>
.demo{
font-size:25px;
}

注意:类选择器的高级用法:给指定的标签设置class样式:

标签·类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

(4)、属性选择器:属性选择器,在标签后面使用中括号标记,其基本语法格式如下:

标签名标签属性:['标签属性值' ] {属性1:属性值1;属性2:属性值2;属性3:属性值3;

该选择器,是对“元素选择器”的扩展,对一组标签进一步过滤。例如:

<style>
input[type="text"]{
background-color:red;
}
input[type="password"]{
background-color:black;
}
</style>

(5)、包含选择器:两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式。

父标签后代标签{属性1:属性值属性2:属性值2;属性3:属性值3;}

该选择器,是对“元素选择器”的扩展,对一个标签内部所有后代标签进行过滤。例如:

<style>
#demo div{
color:red;
}
</style>

7、CSS样式

(1)、边框和尺寸:borden widtln height

1)、border:设置边框的样式 0 格式:宽度样式颜色。例如:

style="border:lpx solid #f00"表示1像素实边红色。

样式取值:solid实线,none无边,double双线等

2)、width、height:用于设置标签的宽度、高度。例如:

<style>
div{
border:1px solid #000;
width:200px;
height:200px;
}
</style>

(2)、布局:float clear

(1)、通常默认的排版方式,将页面中的元素从上到下一一罗列,而实际开发中,需要左右方式进行排版,就需要使用浮动。

选择器{float:属性值}

常用属性值:

left:元素向左浮动 
right:元素向右浮动
none:元素不浮动(默认值)

(2)、由于浮动元素不再占用原文档流的位置,所以它会对页面中其他元素的排版产生影响。如果要避免影响,需要使用clear属性进行清除浮动。

选择器{clear:属性值;}

常用属性值:

left:不允许左侧有浮动元素(清除左侧浮动的影响)
right:不允许右侧有浮动元素(清除右侧浮动元素)
both:同时清除左右侧浮动的影响

(3)、转换:display

1)、HTML提供丰富的标签,这些标签被定义成了不同的类型,一般分为:块标签和行内标签。

块标签:以区域块方式出现。每个块标签独自占据一整行或多整行。

常见的块元素:hl、div、ul等

行内元素:不必在新的一行开始,同时也不强迫其他元素在新的一行显小。

常见的行内元素:span、a等

2)、在开发中,希望行内元素具有块元素的特性,需要使用display进行转换选

择器器{ display:属性值}

常用的属性值:

inline:此元素将显示为行内元素(行内元素默认的display属性值) 
block:此元素将显为块元素(块元素默认的display属性值)
inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。
none:此元素将被隐藏,不显示,也不占用页面空间。

(4)、字体:color font-size

color:颜色,字体颜色

(5)、背景色:background-color

8、CSS盒子模型

(1)、什么是盒子模型

css框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。

(2)、内边距:padding

如果您希望所有hi元素的各边都有10像素的内边距,例如:还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以佼用不同的单位或白分比值:

单边内边届性:
通过使用下面四个单忡的属性,分别设置上、右、下、左内边距:
padding-top、paddinq-riqht、paddinq-bottom、paddinq-left

(3)、边框:border

border-top、border-right、border-bottom、border-left

(4)、外边距:margin

margin-top、margin-right、margin-bottom、margin-left

扫码关注微信公众号,了解更多

前端系列之CSS基础知识概述

前端系列之CSS基础知识概述的更多相关文章

  1. 前端系列之HTML基础知识概述

    1.什么是HTML HTML:Hyper Text Markup Language :超文本标记语言. 超文本:功能比普通文本更加强大. 标记语言:使用一组标签对内容进行描述的语言,它不是编程语言. ...

  2. 前端系列之JavaScript基础知识概述

    ​微信公众号:compassblog 欢迎关注,欢迎转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.什么是JavaScript (1).JavaScript是web上一种功能强大的编程语 ...

  3. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. 〖前端开发〗HTML&sol;CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. Magento 架构基础知识概述

    Megento 架构基础知识概述 Magento整合了面向对象的基于PHP的应用程序的核心架构原则.这些一般原则的综合讨论既有在线的,也有印刷形式.以下讨论主要关注这些主题如何直接应用于Magento ...

  6. &lpar;转&rpar;第一天 XHTML CSS基础知识 文章出处:标准之路&lpar;http&colon;&sol;&sol;www&period;aa25&period;cn&sol;div&lowbar;css&sol;902&period;shtml&rpar;

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  7. DIV&plus;CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  8. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  9. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

随机推荐

  1. IOS textField(textview)字数判断

    textfield 有时会需要设置字数限制,如果只是英文或者符号,可以直接在以下代理方法中判断字数 -(BOOL)textField:(UITextField *)textField shouldCh ...

  2. java的五种数据类型解析

    不知道大家对java的简单数据类型是否了解,下面针对Java的五种类型简单数据类型表示数字和字符,进行详细的讲解和分析. 一.简单数据类型初始化 在Java语言中,简单数据类型作为类的成员变量声明时自 ...

  3. Linux Canbus调试笔记

    STM32之CAN---错误管理分析      牛人博客 http://blog.csdn.net/flydream0/article/details/8161418 CAN总线在嵌入式Linux下驱 ...

  4. C&num;设计模式&lpar;8&rpar;——桥接模式(Bridge Pattern)

    一.引言 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体电视 ...

  5. 打造属于自己的vim利器

    毋庸置疑vim很强大,然而没有插件的话对于大多数人来说他的界面是很不友好的.下面简单写一下我对vim的配置 这是我的vim配置,装的插件不是很多,对我来说已经够用.左边的侧边栏是NERD插件提供的,还 ...

  6. mysql自增

    主键设置自增,同时主键需要是int类型

  7. HDU 1874-畅通project续(最短路Dijkstra&plus;优先队列)

    畅通project续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. ChartControl第一课简短的控件初步设计

    WinForms Controls >Controls > Chart Control > Getting Started This document gives you a qui ...

  9. Android Studio 新建项目结构分析

    这是我刚刚新建的项目  默认都是Android模式的项目结构,但这并不是真实的目录结构 把他换成Project模式 项目的真实目录结构 1app 项目的代码,资源 2 gradle  wrappere ...

  10. svn already lock解决方法

    svn在pull的时候,出现svn already lock 错误.只需要在Cleanup里面勾选Break locks