『黑马程序员济南』JavaEE就业笔记串讲--CSS
CSS的概述l 什么是CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力 HTML相当于网站的骨架!CSS对骨架进行美化! l CSS在那些地方使用: CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS的基本语法CSS的基本语法通常包含两个部分:一个是选择器,一个声明. * 选择器{属性:属性值;属性:属性值...} CSS的引入的方式l 行内样式:直接在HTML的元素上使用style属性设置CSS. <h1style="color:red;font-size:200px ;">标题</h1> l 页面内样式:在HTML的<head>标签中使用<style>标签设置CSS. [HTML] 纯文本查看 复制代码 <style>[/align] h1{
color:blue;
font-size: 40px;
}
</style> l 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件. [HTML] 纯文本查看 复制代码 <link href="../../css/demo1.css" rel="stylesheet" type="text/css" /> CSS的选择器:l 元素选择器: [HTML] 纯文本查看 复制代码 div{
border:1px solid blue;
width:40px;
height:45px;
} l ID选择器: [HTML] 纯文本查看 复制代码 #d1{
border:2px solid red;
} l 类选择器: [HTML] 纯文本查看 复制代码 .divClass{
border:2px solid yellow;
} CSS的浮动l 使用float属性可以完成DIV的浮动 l float属性的取值: l 清除浮动效果:使用clear属性进行清除: CSS的其他选择器l 属性选择器: [HTML] 纯文本查看 复制代码 <style>
input[type="text"]{
background-color: red;
}
</style> l 后代选择器: div span 查找的是所有div中的所有的span元素. [HTML] 纯文本查看 复制代码 h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1> l 子元素选择器: div > span找这个div中的第一层级的span元素. [HTML] 纯文本查看 复制代码 h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1> l 并列选择器: 选择器,选择器{ } CSS的样式l 背景 l 文本 l 字体 l 列表
|