web前端笔记整理---CSS

   Css  文件

Css: 美化HTML的

4种选择器:

元素选择

类选择

ID选择

伪类选择

常用的布局方案

     1 写在什么位置能好用。

1.1 元素里面 优先级是最高的

1.2 元素外,文件内  优先级次之

1.3 外部文件

 

引入方式

 

组成

选择器:标签/元素选择器   class    ID   伪类选择器   属性选择器 (不常用)

组合形式:

层级选择器

.wangjianlin,.mahuateng{color: yellow;}/*组合选择器*/

父子

.wangjianlin>span{background-color: blue;}/*父子选择器*/

子孙

.wangjianlin span{background-color: brown;}/*祖辈子孙都可以*/

.header .logo{background-color: azure;}/*常用的处理手法*/

 

   属性:

 

      cursor     属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

pointer

光标呈现为指示链接的指针(一只手)

 

宽高:width (min-width,max-width)

  height(min-height,max-height)

 

字体:font (font-style(字体), font-weight(字体粗细),font-size(字体大小),font-family)

 字体大小,最小值,根据浏览器不同,而不同

 

文本

text-overflow(设置或检索是否使用一个省略标记(...)标示对象内文本的溢出)

text-align(对齐方式)

text-shadow (设置或检索对象中文本的文字是否有阴影及模糊效果)

line-height(检索或设置对象的行)

verticl-align(设置或检索对象内容的垂直对其方式)

 

背景:background,background-color,background-image,background-repeat(设置或检索对象的背景图像是否及如何铺排)

background-attachment(设置或检索背景图像是随对象内容滚动还是固定的)

background-position    图片中心位置控制:background-size   

left: 默认的元素

 center:最大外部元素

right:右侧 列表

常用用法:背景渐变

.show_img{background-image: url("1.png");  background-repeat:no-repeat; background-position-y: -20px; color: yellow; opacity: 0.1;}

背景拼接:css-sprite

 

颜色:Color   字体颜色     Opacity   透明度 0.5

例子:filter:alpha(opacity=50)     opacity:0.5

 

布局:float(该属性的值指出了对象是否及如何浮动)

 clear (该属性的值指出了不允许有浮动对象的边,清除浮动)  

display  (设置或检索对象是否及如何显示)

visibility   (设置或检索是否显示对象)

overflow(检索或设置当对象的内容超过其指定高度及宽度时如何管理内容   hidden :  不显示超过对象尺寸的内容 )

 

列表:list-style    none无   list-style-image

   list-style-position    list-style-type

 

定位:     position  top/right/botton/left  分别距离多少

 z-index : 层级大小

absolute :  将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。

relative :  对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

定位[top/left][bottom/right]

absolute

相对定位的那个元素,非static

fixed

相对屏幕

releative

之前位置依然占用

static

默认

 

边框 :border 

border-width(设置对象边框的样式)   

border-style(设置对象左边框的样式)

border-color  (设置对象边框的颜色)   

border-radius  边框半径

border-shadow  边框阴影

 

边距:padding(检索或设置对象四边的内补丁)

padding-top/left/right/bottom:上下左右的内补丁margin-top/left/right/bottom

 

单位:em相对于当前对象内的文本尺寸

Px      相对长度-像素

%       百分比

Rem   相对于根元素大小的单位

 

盒子模型:外编距,内边距,边框,内容

div+css设计

转载于:https://www.cnblogs.com/123hk/p/7454078.html

你可能感兴趣的:(web前端笔记整理---CSS)