Css  文件

Css: 美化HTML的

4种选择器:

元素选择

类选择

ID选择

伪类选择

常用的布局方案

1 写在什么位置能好用。

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

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

1.3 外部文件

引入方式:<style type="text/css"></style>

组成

选择器:标签/元素选择器   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设计

web前端笔记整理---CSS的更多相关文章

  1. web前端笔记整理,从入门到上天,周周更新

    由于大前端知识点太多,所以一一做了分类整理,详情可见本人博客 http://www.cnblogs.com/luxiaoyao/ 一.HTML 1.注释 格式:<!-- 注释内容 --> ...

  2. Web前端笔记整理

    不使用Ajax无刷新提交: header('HTTP/1.1 204 No Content'); var a=document.createElement('img'); a.setAttribute ...

  3. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  4. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  5. web前端篇:CSS使用,样式表特征,选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  6. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  7. 1+x证书Web前端开发HTML+CSS专项练习测试题(八)

    1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...

  8. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  9. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

随机推荐

  1. Win10系统下安装Oracle服务器和Oracle客户端

    工作电脑从Win7换为Win10,在给Win10系统安装Oracle时花费了很长世间终于搞定,在此给大家分享下. 1.工作中需要连接测试环境.生产环境Oracle,所以安装了公司封装的Oracle客户 ...

  2. AtCoder Beginner Contest 068

    A - ABCxxx 题意: 给出n,输出“ABCn”就可以了,纯水题. B - Break Number 题意: 给出n,找出从1到n的闭区间内能够被2整除最多次的数. 思路: 直接模拟. 代码: ...

  3. 解决input[type=file]打开时慢、卡顿问题

    经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 然而,这个插件是从 ...

  4. Android学习笔记-构建一个可复用的自定义BaseAdapter

    转载自http://www.runoob.com/w3cnote/android-tutorial-customer-baseadapter.html   作者:coder-pig 本节引言: 如题, ...

  5. 蓝桥杯比赛javaB组练习《四平方和》

    四平方和 四平方和定理,又称为拉格朗日定理:每个正整数都可以表示为至多4个正整数的平方和.如果把0包括进去,就正好可以表示为4个数的平方和. 比如:5 = 0^2 + 0^2 + 1^2 + 2^27 ...

  6. 详解Tomcat 配置文件server.xml

    前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的 ...

  7. iOS底层学习-KVC使用实践以及实现原理

    简介 KVC(Key-value coding)键值编码,顾名思义.额,简单来说,是可以通过对象属性名称(Key)直接给属性值(value)编码(coding)"编码"可以理解为& ...

  8. 超超超简单的bfs——POJ-3278

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 89836   Accepted: 28175 ...

  9. java中Comparable和Comparator两种比较器的区别

    Comparable和Comparator接口都是为了对类进行比较,众所周知,诸如Integer,double等基本数据类型,java可以对他们进行比较,而对于类的比较,需要人工定义比较用到的字段比较 ...

  10. 1.配置vsftp服务器

    1.安装 vsftp yum -y install ftp vsftpd 2.查看配置文件所在路径 rpm -qc vsftpd 3.备份vsftpd文件 cp vsftpd.conf vsftpd. ...