首页 > Web开发 > 详细

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

时间:2018-02-14 22:10:53      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:--   tex   radi   ref   浮动元素   大小   设置   处理   add   

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#f00font-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#f00font-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基础知识概述

标签:--   tex   radi   ref   浮动元素   大小   设置   处理   add   

原文:https://www.cnblogs.com/compassblog/p/8448960.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号