热搜:NVER node 开发 php

CSS基础知识学习笔记_html/css_WEB-ITnose

2024-11-05 18:10:01
CSS基础知识学习笔记_html/css_WEB-ITnose

1.css基本样式讲解

1.1 css背景
background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-color:设置元素的背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-orgin:规定图片的定位区域
background-clip:规定背景的绘制区域
1.2 css文本
color :文本颜色
direction :文本方向
line-height :行高
letter-spacing: 字符间距
text-align :对齐元素
text-decoration :向文本添加修饰
text-indent :缩进元素中文本首行
text-transform :元素中的字母
unicode-bidi :设置文本方向
white-space :元素中空白的处理方式
word-spacing :字间距
text-wrap:自动换行
text-shadow:向文本添加阴影
1.3 css字体
font-family :设置字体系列
font-size :设置字体尺寸
font-style :设置字体风格
fongt-variant: 以小型大写字体或正常字体显示文本
font-weight: 设置字体的粗细
1.4 css链接
a:link 普通的、未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration:这个属性大多用于去掉链接中的下划线
background-color:背景颜色
1.5 css列表
CSS列表属性可以灵活的放置、改变标志,或者将图像作为列表项标志
list-style :简写列表项
list-style-image :列表项图像
list-style-position: 列表项标志位置
list-style-type :列表类型
1.6 css表格
表格边框:

#tb,th,td,tr{ border: 1px solid blue; }

折叠边框:

#tb{ border-collapse: collapse; }

1.7 css轮廓
outline :设置轮廓属性
outline-color :设置轮廓的颜色
outline-style :设置轮廓的样式
outline-width :设置轮廓的宽度

2.css盒子模型

内边距:
内容外部,边框内部
padding 设置所有边距
padding-bottom、left、right、top 单独设置某个方向的边距
边框:
可以创建出效果出色的边框,并且可以用于任何元素
border-style:定义了10种样式
border-(top,bottom,left,right)-style:定义单边样式
border-width:边框宽度设置
border-(top,bottom,right,left)-width 单边框宽度
border-color 边框颜色
border-(top,left,bottom,right)-color 单边框颜色
CSS3边框:
border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片
外边距:
margin 整体外边距
margin-(top,bottom,left,right) 单边外边距
外边距合并:就是一个叠加的概念

3.css定位与浮动

css定位:
position:static、relative、absolute、fixed;
top
left
right
bottom
overflow
….
css浮动:
float属性:left,right,none,inherit
clear属性:去掉浮动属性
left,right:去掉左右浮动
both:左右两侧浮动均去掉
inherit:从父级继承来clear值

4.css选择器

派生选择器:

li strong{    color:red;}

具体制定列表项里的strong标签效果,已经被定义好的效果是不会被覆盖。

id选择器:

#id { color:red; }

id选择器可以和派生选择器组合使用,id选择器不好与id组合使用

类选择器:

.pclass{ color:red; }

类选择器也可以和派生选择器进行组合使用

属性选择器:
缺省属性选择器:

[title]{ color:red; }   

带名字的属性选择器:

[title=te]{ color:red; }

在IE6及更低版本,不支持属性选择器
属性选择器必须完全匹配才会起作用

子元素选择器:
采用>符号,只是只能用一级一级定位

相邻兄弟选择器:
标签+标签的形式,这个只要做一个简单的了解即可