黑马程序员技术交流社区
标题: 『黑马程序员济南』JavaEE就业笔记串讲--CSS [打印本页]
作者: 小鲁哥哥 时间: 2017-7-27 11:42
标题: 『黑马程序员济南』JavaEE就业笔记串讲--CSS
『黑马程序员济南』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.
h1{
color:blue;
font-size: 40px;
}
</style>
l 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
[HTML] 纯文本查看 复制代码
<link href="../../css/demo1.css" rel="stylesheet" type="text/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;
}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 列表
作者: qidianlu 时间: 2017-7-27 17:13
老铁很给力！！！
作者: zsldeyou 时间: 2017-7-31 14:47
感谢楼主!!!{:8_468:}
作者: k1453711238 时间: 2017-8-2 23:15
多谢大哥分享啊,希望持续更新啊
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
