HTML&CSS设计与构建网站(css)

/*只记录不熟悉的部分*/

外部CSS样式：

1）在HTML中引用 <link href="" type="text/css" rel="stylesheet"> ；

2）在CSS中引用 @import url("");

子元素选择器 li>a {} 直接子元素；

后代选择器 p a {} 不论之间是否嵌套其他元素；

属性值inherit 强制元素继承父元素属性值；

opacity:0~1;透明度，应用于指定元素及子元素；

rbga(0,0,0,0);类似于rbg(0,0,0)，增加了alpha值表示透明度0~1，不作用于子元素；

hsl(0,100%,100%)HSL颜色（色调0°~360°，饱和度百分数，明度百分数）；

hsla(0,0%,50%,0.5)添加了透明度alpha值；

@font-face { 选用外部字体

           font-family: ;

           src:url('') format(''); 字体路径及格式

                   }

font-weight:normal/bold;粗体

font-style:normal/italic/oblique;斜体

text-transform:uppercase/lowercase/capitalize;大小写

text-decoration:none/uderline/overline/line-through/blink;下划线和删除线

line-height 行间距 letter-spacing 字母间距 word-spacing 单词间距

text-align:justify; 文本两端对齐

vertical-align垂直对齐，更多用于内联元素

text-indent 文本缩进

text-shadow:1px 1px 0px #ffffff; 文本投影，左右延伸距离，上下延伸距离，可选项投影模糊程度，颜色；

伪元素 :first-letter首字母  :first-line首行

伪类 :link未访问过的链接  :visited已访问过的链接

        :hover鼠标悬停  :active鼠标点击  :focus元素拥有焦点

*特性选择器 []简单选择器； [=]精确选择器； [~=]部分选择器； [attr^""]开头选择器； [attr*""]包含选择器； [attr$""]结尾选择器；

max-width min-width 宽度限制  max-height min-height 高度限制

overflow:hidden/scroll 内容溢出，隐藏或添加滚动条

border-style 边框样式

display:none;元素从页面上隐藏

visibility:hidden/visible;元素隐藏但保留占用空间

border-image:url('') 11 11 11 11 stretch/repeat/round;边框图像，URL，切割图片的位置，伸展/重复/围绕

box-shadow:5px 5px 8px 10px #ffffff; 盒子投影，水平偏移，垂直偏移，模糊距离，阴影扩展，颜色，前使用inset创建内部阴影

border-radius 圆角，可以分别为四个圆角进行设置，横向值*4/纵向值*4

list-style

list-style-type 项目符号样式

list-style-image:url("");项目图像，应用于<ul>中的<li>

list-style-position:outside/inside;标记的定位

empty-cells:show/hide/inherit;空单元格的边框，显示/隐藏/继承外部规则

border-spacing:1px 2px; 单元格之间的空隙距离

border-collapse:collapse/separate;相邻单元格的边框合并/分离

cursor:url("");光标样式

position:static; 普通流定位，默认定位

position:relative; 相对定位，相对于元素普通流位置进行移动

position:absolute; 绝对定位，脱离普通流，相对于父级元素进行定位

position:fixed; 固定定位，绝对定位的一种类型，相对于浏览器窗口进行定位

z-index 重叠元素，堆叠上下文，数字越大，层次越高

float:left/right; 浮动元素，在父元素内浮动，其它元素在其周围流动

clear:left/right/both/none; 清除浮动，在同一个父级元素内，左侧或右侧不允许浮动元素

*当父元素只包含一个浮动元素时，浏览器可能将它的高度当成0

    解决方式：添加属性overflow:auto;width:100%;

background-image:url("");背景图像

background-repeat:repeat/repeat-x/repeat-y/no-repeat; 背景图像在X轴或Y轴上重复

background-attachment:fixed/scroll;背景图像在页面滚动时，固定/移动

background-position:1px 5px;背景图像定位，应用与雪碧sprite图

*CSS3渐变（注意不同浏览器区别）

background: linear-gradient(direction, color-stop1, color-stop2,
...);