A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始


『黑马程序员济南』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  列表

3 个回复

倒序浏览

回帖奖励 +1

老铁很给力!!!
回复 使用道具 举报

回帖奖励 +1

感谢楼主!!!{:8_468:}
回复 使用道具 举报
多谢大哥分享啊,希望持续更新啊
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马