CSS学习笔记
2017-12-06 00:00
148 查看
摘要: 后期整理，格式方面没有过于整理。 主要是一些CSS方面的基础知识。
继承：子标签继承父类标签（样式），只继承文本样式。
权重：（选择器）id选择器>类选择器>标签选择器
覆盖：权重样式会覆盖。标签 覆盖 页面 覆盖 文件
直接在HTML标签中写样式
style=”样式属性：样式值”
2、直接写在页面内
<head>
<style type=text/css>
选择器
</style>
</head>
3、使用外部文件进行描述
①编写css文件，引入外部样式表
<head>
<link
type=”text/css”
rel=”stylesheet”
Href=”css文件路径”>
</head>
②@import 不常使用
语法结构：
目标（选中标签）{
样式名称：样式值；
样式名称：样式值；
······
样式名称：样式值
}
（元素）标签选择器：直接写标签名称
Eg：
p{
width:50px;
height:50px;
}
类选择器：.类名（给目标类型加上class属性，值可以重复）
Eg：
.classname{
width:50px;
height:50px;
}
id选择器：#id（给目标类型加上id属性，值不可以重复）
Eg：
#id{
width:50px;
height:50px;
}
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
margin-top 与上边距的距离
margin-right 与右边距的距离
margin-bottom 与下边距的距离
margin-left 与左边距的距离
padding 填充的距离
padding-top填充（上）的距离
padding-right填充（右）的距离
padding-bottom填充（下）的距离
padding-left填充（左）的距离
<div></div>
设置值： isible 扩大浏览器
hidden 裁剪掉多余的文本
scroll 滚动条
auto 当有多余的时候才显示滚动条
②float 该属性的值指出了对象是否及如何浮动
设置值： left表示文字浮在元素左侧
right 表示文字浮在元素右侧
none 默认值，表示不浮动。<该属性特别重要，一定要掌握>
③clear 该属性的值指出了对象不允许有浮动的边
设置值：left ,right,none,both
④display 该属性的值指出了对象是否及如何显示
设置值：block、none（隐藏）（、inline、list-item）
⑤word-break（div中文本自动换行）
设置值：
normal 使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
5 visibility 可视性
设置值：
inherit：表示对象继承父本的继承性。
visible:表示对象可见
hidden：表示对象隐藏
6 clip 可视区域
设置值：
auto表示对象不裁剪
rect(数值表示)(一般有四个设置值：方向定位于上右下左的顺序，一般以左上角(0,0)坐标计算4个偏移数值。其中任何一个值都可以用auto代替)
7 page-break-before 设置值：always 是否强制分页
8 page-break-after 设置值：always 打印后设置是否强制分页
9 width和height 表示层的宽度与高度。设置值为 auto|数值
使用div布局，读取结束div直接显示。
缺点：代码繁琐。
（CSS+table；CSS负责美观，div负责布局；
代码管理简单
缺点：内容多的话，加载慢。
）
消除层与浏览器之间的间隙
body{ magin=0px; pading=0px;}
span标签
magin: auto;(div居中)
Eg： box-shadow: 5px 0px 5px #888888;（右边阴影）
box-shadow: -5px 0px 5px #888888;（左边阴影）
box-shadow: 0px 5px 5px #888888;（下边阴影）
box-shadow: 0px -5px 5px #888888;（上边阴影）
box-shadow: 5px 0px 5px #888888,-5px 0px 5px #888888,
0px -5px 5px #888888,0px 5px 5px #888888;
（四周阴影）
CSS
（一）Css简介
Css:层叠样式表单(/* */ 注释)继承：子标签继承父类标签（样式），只继承文本样式。
权重：（选择器）id选择器>类选择器>标签选择器
覆盖：权重样式会覆盖。标签 覆盖 页面 覆盖 文件
1. 样式表引用：
1、直接写在标签中直接在HTML标签中写样式
style=”样式属性：样式值”
2、直接写在页面内
<head>
<style type=text/css>
选择器
</style>
</head>
3、使用外部文件进行描述
①编写css文件，引入外部样式表
<head>
<link
type=”text/css”
rel=”stylesheet”
Href=”css文件路径”>
</head>
②@import 不常使用
语法结构：
目标（选中标签）{
样式名称：样式值；
样式名称：样式值；
······
样式名称：样式值
}
2. 选择器：
选中要修改样式的（HTML）标签（元素）标签选择器：直接写标签名称
Eg：
p{
width:50px;
height:50px;
}
类选择器：.类名（给目标类型加上class属性，值可以重复）
Eg：
.classname{
width:50px;
height:50px;
}
id选择器：#id（给目标类型加上id属性，值不可以重复）
Eg：
#id{
width:50px;
height:50px;
}
（二）样式属性
3. 文本样式属性
| font-family | 字体 |
| font-size | 字号大小 |
| font-style | 字体样式（normal正常状态、italic斜体字、oblique斜体和正常状态之间） |
| font-weight | 字体宽度。 |
| line-height | 行高 |
| line-through | 为文字加删除线 |
| text-decoration | （underline下划线，overline上划线，blink使文字闪烁，none无效果） |
| text-align | 文本对齐方式 |
| color | #rrggbb或者#rgb或者颜色单词 |
| letter-spacing | 字间距 |
| word-spacing | 单词间距 |
| font | 属性全部定位：示例p{font:italic bold 12pt;} |
4. 光标属性
cursor 当点击某个内容时，鼠标显示其他的图形style="cursor:hand" 手形
style="cursor:crosshair" 十字形
5. 超链接
a{ text-decoration：none；（去除下划线）}a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
6. 背景样式属性
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | repeat平铺方式表示图像从水平和垂直角度平铺 no-repeat不重复平铺背景图片 repeat-x使图片只在水平方向上平铺 repeat-y使图片只在垂直方向上平铺。 |
| background-attachment | fixed网页滚动时，背景图片相对浏览器而言固定不动 scroll网页滚动时，背景图片相对浏览器而言一起滚动。 |
| background-postion | 背景图片 top相对前景对象顶对齐 bottom相对前景对象底对齐left 相对前景对象左对齐right 相对前景对象右对齐center 相对前景对象中心对齐 |
| background | 复合属性式样 示例：table{background:#001122 url(zhouliang.jpg) no-repeat bottom right} |
7. 边框样式属性
| border-width | 边框宽度 | |
| border-top-width | 上边框宽度 | |
| border-right-width | 右边框宽度 | |
| border-bottom-width | 底边框宽度 | |
| border-left-width | 左边框宽度 | |
| border-style | 边框样式 | none 无边框，为默认值 dotted 点线（电线） dashed 虚线，也称短线 solid 实线 double 双实线 groove 边框带有立体感的沟槽 ridge 边框成脊形 inset 使整个表框凹陷，即在边框内嵌入一个立体边框 outset 使整个边框凸起，即在边框外嵌入一个立体边框 |
| border-top-style | 上边框样式 | |
| border-right-style | 右边框样式 | |
| border-bottom-style | 底边框样式 | |
| border-left-style | 左边框样式 | |
| border-color | 边框的颜色 | |
| border-top-color | 上边框颜色 | |
| border-right-color | 右边框颜色 | |
| border-bottom-color | 底边框颜色 | |
| border-left-color | 左边框颜色 |
8. 填充与边距样式属性
margin 与边距的距离margin-top 与上边距的距离
margin-right 与右边距的距离
margin-bottom 与下边距的距离
margin-left 与左边距的距离
padding 填充的距离
padding-top填充（上）的距离
padding-right填充（右）的距离
padding-bottom填充（下）的距离
padding-left填充（左）的距离
<div></div>
9. 用于定位的样式属性
| postion | 定位方式 absolute 采用绝对定位（分别用四个边框来定位） relative 采用相对定位（也得用四个边框来设定位置） static 默认值 |
| top | 距顶端的距离 |
| right | 距右端的距离 |
| bottom | 距底端的距离 |
| left | 距左端的距离 |
| z-index | (元素的堆叠,大的在上，小的在下。默认是按照先后顺序) |
10. 用于布局的样式属性
①overflow 该属性的值指出了对象的值超出范围该如何处理：设置值： isible 扩大浏览器
hidden 裁剪掉多余的文本
scroll 滚动条
auto 当有多余的时候才显示滚动条
②float 该属性的值指出了对象是否及如何浮动
设置值： left表示文字浮在元素左侧
right 表示文字浮在元素右侧
none 默认值，表示不浮动。<该属性特别重要，一定要掌握>
③clear 该属性的值指出了对象不允许有浮动的边
设置值：left ,right,none,both
④display 该属性的值指出了对象是否及如何显示
设置值：block、none（隐藏）（、inline、list-item）
⑤word-break（div中文本自动换行）
设置值：
normal 使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
5 visibility 可视性
设置值：
inherit：表示对象继承父本的继承性。
visible:表示对象可见
hidden：表示对象隐藏
6 clip 可视区域
设置值：
auto表示对象不裁剪
rect(数值表示)(一般有四个设置值：方向定位于上右下左的顺序，一般以左上角(0,0)坐标计算4个偏移数值。其中任何一个值都可以用auto代替)
7 page-break-before 设置值：always 是否强制分页
8 page-break-after 设置值：always 打印后设置是否强制分页
9 width和height 表示层的宽度与高度。设置值为 auto|数值
（三）CSS页面布局
现在的页面一般都是用CSS+div；CSS负责美观，div负责布局；使用div布局，读取结束div直接显示。
缺点：代码繁琐。
（CSS+table；CSS负责美观，div负责布局；
代码管理简单
缺点：内容多的话，加载慢。
）
| 文件结构 | |
| 项目名 | CSS |
| JS | |
| images | |
| HTML | |
| 网站大体布局 | 导航条navigation |
| 网站头部top | |
| 主要内容center | |
| 边框left/right | |
| 网站底栏bottom |
body{ magin=0px; pading=0px;}
span标签
magin: auto;(div居中)
11. box-shadow(边框阴影)
设置值：水平阴影的位置（允许负值）垂直阴影的位置（允许负值） 阴影大小 阴影颜色Eg： box-shadow: 5px 0px 5px #888888;（右边阴影）
box-shadow: -5px 0px 5px #888888;（左边阴影）
box-shadow: 0px 5px 5px #888888;（下边阴影）
box-shadow: 0px -5px 5px #888888;（上边阴影）
box-shadow: 5px 0px 5px #888888,-5px 0px 5px #888888,
0px -5px 5px #888888,0px 5px 5px #888888;
（四周阴影）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Head First HTML 与CSS 第二版学习笔记（一）
- 精通CSS--高级 WEB 标准解决方案（第2版）学习笔记
- 《十天学会web标准（div+css）》学习笔记
- CSS学习笔记
- xHtml+css学习笔记
- HTML、css和javascript开发Android程序第五章节 客户端存储 学习笔记
- CSS学习笔记
- CSS 学习笔记
- css学习笔记
- CSS+DIV学习笔记——页面布局
- css学习笔记
- html，css学习笔记
- css写三角符号－学习笔记
- 黑马程序员-- css基础学习笔记
- CSS学习笔记
- css&div学习笔记(2)
- 《网页开发手记》学习笔记之CSS和DIV
- css学习笔记
- Css 学习笔记
- CSS圆角进化论