CSS笔记
1. CSS初步体验
可以补足Html的缺陷
h2{
font-family:幼圆;
color:#FF0000;5
}
可统一html标记中的统一属性的设置；(使显示风格得到统一)
行内样式：
<p style="color:#0000FF; font-size:18px; text-decoration:underline">
正文内容1</p>
<p style="color:#000000; font-style:italic;">正文内容2</p>
<p style="color:#FF00FF; font-size:24px; font-weight:bold;">正文内容3</p>
内嵌样式：
p{ color:#ff00ff;
text-decoration:underline;
font-weight:bold;
font-size:24px;
}
外部样式：
导入式
<STYLE type="text/css">
@import url(1.css);
</STYLE>
链接式：<link href="1.css" type="text/css" rel="stylesheet">
StyleSheet 接口是任何类型样式表的抽象基接口。它表示与一个结构化文档相关联的单个样式表。在 HTML 中，StyleSheet 接口既可以表示一个外部的样式表（通过 HTML LINK 元素来定义），也可以表示一个内嵌的STYLE 元素。在 XML 中，本接口表示一个外部样式表（通过样式表处理指令来定义）。
2. CSS基本语法
标记选择器”h1,p,div”
h1——选择器
声明
{
Color:red; ——声明：属性；值
font-size:14px;——声明：属性；值
}
类别选择器”.”
.one——类别名称
{
color:red; /*声明：属性；值*/
font-size:18px; /*声明：属性；值*/
}
ID选择器”#”
#one——id名称
{
color:red; /*声明：属性；值*/
font-size:18px; /*声明：属性；值*/
id和class的区别在于id选择器用于多个标记时，会导致JavaScript查找id时出错
集体声明
h1,h2,h3,h4,h5,p{ /*集体声明*/
color: purple; /*文字颜色*/
font-size:16px; /*字体大小*/
}
h2.special, specal, #one{ /*集体声明*/
text-decoration:underline; /*下划线*/
}
选择器的嵌套
p b{ /*嵌套声明*/
color:maroon; /*颜色*/
text-decoration:underline; /*下滑线*/
}
CSS的继承关系
如果一个标记被包含在另一个标记中，那么他将继承另一个标记
h1{
color:red; /*颜色*/
text-decoration:underline; /*下划线*/
}
h1 em{
color:#004400;
font-size:36px;
}
<h1>祖国的首都<em>北京</em></h1>
3. CSS的文字样式
1. 字体
h2{
font-family:黑体,幼圆; /*如果系统中没有黑体，就要幼圆*/
}
p{ font-family:Arial, Helvetica, sans-serif; /**/
}
p.kaiti{ font-family:楷体_GB2312, "Time New Roman"; /**/
}
2. 文字的大小
p.inch{ font-size: 0.5in;}
p.cm{ font-size: 0.5cm;}
p.mm{ font-size: 4mm; }
p.tp{ font-size:12px;}
p.pc{ font-size: 2pc;}
3. 文字的颜色
h2{ color:rgb(0%,0%,80%);}
p{ color:#33FF00;
font-size:24px;
}
p span{ color:blue;}
4. 文字粗细
h2{ color:rgb(0%,0%,80%);}
5. 文字粗细
h1{ font-style:italic;} /*设置斜体*/
h1 span{ font-style:normal;} /*设置为标准风格*/
p{ font-size:18px;}
p.one{ font-style:italic;}
p.two{ font-style:oblique;}
6. 下化线，上划线，删除线。
p.one{ text-decoration:underline;} /*下滑线*/
p.tow{ text-decoration:overline;} /*顶划线*/
p.three{ text-decoration:line-through;} /*删除线*/
p.four{ text-decoration:blink;} /*闪烁*/ ie不支持
7. 英文字母大小写
p{ font-size:16px;}
p.one{ text-transform:uppercase;} /*单词首字母大写*/
p.two{ text-transform:capitalize;} /*全部大写*/
p.three{ text-transform:lowercase;} /*全部小写*/
4. 图片设置效果
1. 图片边框
img.test1{
border-style:dotted; /*点划线*/
border-color:#Ff9900; /*边框颜色*/
border-width:5px; /*边框粗细*/
}
img.test2{
border-left:dashed 2px blue;
border-right:dashed 5px red; /*单独设置设置边框的*/
}
2．图片样式
img.test1{
height:50px; /*图片的大小可以是相对的也可以是绝对的*/
width:20%; /*它的大小是相对与浏览器而言*/
}
3．图片对齐
水平对齐：
<table width="100%" border="1">
<tr><td style="text-align:left"><img src="building.jpg"></td>
<td style="text-align:center"><img src="building.jpg"></td>
<td style="text-align:right"><img src="building.jpg"></td></tr>
</table>
垂直对齐：
4．图文混排
文字环绕：
body{
background-color:red; /*页面背景颜色*/
margin:0px;
padding:0px;
}
img{
float:left; /*文字环绕图片*/
}
p{
color:#FFFF00; /*文字颜色*/
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left; /*首字放大*/
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
设置图片和文字的间距
5. 设置网页中背景
1. 页面背景色
body{
background-color:#5b8a00; /*设置页面的背景颜色*/
margin:0px;
padding:0px;
color:#c4f762; /*设置页面文字颜色*/
}
p{
font-size:14px; /*正文字的大小*/
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:76px; /*首字放大*/
font-family:黑体;
float:left;
padding-right:10px;
padding-left:5px;
padding-top:8px;
}
2. 利用背景色分类显示
< STYLE >
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbannerP{
width:20%; height:330px;
vertical-align:top;
background-color:#6d1700;
color:#ffffff;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
</STYLE>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbannerP">
<br><br>首页<br><br>谈天说地
<br><br>分类讨论<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
</td>
<td class="mainpart">正文内容......</td>
</tr>
</table>
</body>
3. 页面的背景图
4. 页面的背景图重复
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg); /*背景图片颜色*/
background-repeat:repeat-x; /*垂直方向重复*/
background-color:#0066FF; /*背景颜色*/
}
5. 背景图片的位置
通过图片的位置，可以很好的利用一些大的图片来显示样式。
body{
padding:0px;
margin:0px;
background-image:url(bg4.jpg); /*背景图片*/
background-repeat:no-repeat; /*不重复*/
background-position:bottom right; /*背景的位置，右下*/
background-color:#eeeee8;
}
span{
font-size:70px; /*首字放大*/
float:left;
font-family:黑体;
font-weight:bold;
}
p{
margin:0px;
font-size:14px;
padding-top:10px;
padding-left:6px;
padding-right:8px;
}
6.
6. 设置表格与表单
1. 字体
7. 设置浏览器元素
1. 字体
font-size:70p
8. 制作实用菜单
1. 字体
font-size:70p
9. CSS滤镜应用
1. 字体
font-size:70p
10. 理解CSS+DIV布局
1. div标记和span标记
div标记和收盘标记的区别：
div标记不同行：
span标记同行：
2. 盒子模型
Border
Padding
margin
分享到：
相关推荐
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容，对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言，用于定义网页的各个元素...
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
**CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
- **网站**：《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》，都是优秀的在线资源，涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**：了解万维网的创始人Tim Berners-Lee，...
### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取...
在网页设计中，`div+css`是一种常见的布局技术，用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素，用于组织和包裹其他HTML元素，而`css`则是层叠样式表，用来定义网页的样式、布局和视觉效果。`div+...
**CSS（层叠样式表）全面手册** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。通过使用CSS，我们可以控制网页元素的颜色、字体、...
- 外部 CSS：通过 `<link>` 标签引用一个外部的 CSS 文件，如 `<link href="my.css" type="text/css" rel="stylesheet"/>`，这种方式有利于样式复用和代码组织。 - 内部 CSS：将 CSS 代码写在 HTML 的 `<style>` ...
### CSS 笔记：滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中，为了使页面更加美观或者实现特定的视觉效果，开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...
html和css基础总结，适合入门web和初学者
这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构，如`...
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;">文本</p>`。 2. 内部样式表：将CSS写在HTML文档的`<head>`...
这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例，文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是：...