(3)外部样式
外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将样式连接到HTML文档中。
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个标记链接多个CSS样式表。
想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则不符被称为选择器，本小节将对CSS基础选择器进行详细地讲解，具体如下：
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }该语法中，所有的HTML标记名都可以作为标记选择器，例如body、h2、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效
例如：
超链接 小灰灰一号
小灰灰二号
小灰灰三号
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式
id选择器使用"#"进行标识，后面紧跟id名，其基本语法格式如下：
#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }该语法中，id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例如：
超链接 小灰灰
类选择器使用“.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下：
.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }该语法中，id名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
例如：
超链接 小灰灰
类选择器的高级用法：给指定的标签设置class样式
标签.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }属性选择器，在标签后面是有中括号标记，其基本语法格式如下：
标签名 [标签属性='标签属性值'] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}该选择器，是对"元素选择器"的扩展，对一组标签进一步过滤。
例如：
超链接
包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。
父标签 后代标签{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }该选择器，是对"元素选择器"的扩展，对一个标签内部所有后代标签进行过滤。
超链接 小灰灰1小灰灰2
border：设置边框的样式
格式：宽度 样式 颜色
例如：style="border:1px solid #f00" ，1像素实边红色。
样式取值：solid 实线，none 无边， double 双线 等
width、height：用于设置标签的宽度、高度。
超链接 小灰灰
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
选择器{float:属性值}
常用属性值：
left:元素向左浮动
right:元素向右浮动
none:元素不浮动(默认值)由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。
选择器{clear:属性值;}
常用属性值：
left：不允许左侧有浮动元素(清除左侧浮动的影响)
right：不允许右侧有浮动元素(清除右侧浮动的影响)
both：同时清除左右两侧浮动的影响例如：
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
块标签：以区域块方式出现。每个块标签独占一整行或多整行。
常见的块元素：
行内元素：不必再新一行开始，同时也不强迫其他元素在新的一行显示。
常见的行内元素：、等
在开发中，希望行内元素具有块元素的特性，需要使用display进行转换
选择器{ display:属性值}
常用的属性值：
inline:此元素将显示为行内元素(行内元素默认的display属性值)
block：此元素将显示为块元素(块元素默认的display属性值)
inline-block:将对象呈递为内联对象，但是对象的内容作为块对象呈递。
none：此元素将被隐藏，不显示，也不占用页面空间。例如：
超链接 显示1-1 显示1-2 显示2-1 显示2-2
2.4.4 字体：color、font-size
color：颜色，字体颜色
例如：
CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。
例如，如果您希望所有h2元素的个边都有10px的内边距，只需要这样：
h2{ padding:10px;}还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h2 {padding:10px 0.25em 2ex 20%}单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
border-top-style
border-right-style
border-bottom-style
border-left-style
margin-top
margin-right
margin-bottom
margin-left
Das obige ist der detaillierte Inhalt vonWelche HTML- und CSS-Wissenspunkte sind in Java Web enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
