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(directioncolor-stop1color-stop2, ...);



博主设置当前文章不允许评论。

没有更多推荐了,返回首页