html(2)之CSS
来源:互联网 发布:免费商城系统 php 编辑:程序博客网 时间:2024/04/27 17:42
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
前面h1是设置的选择器,后面跟着的key:value是一条声明。多条声明之间用冒号隔开就可以了,跟android在给view设置属性时差不多,少了命名空间。这样在style标签里面就可以为一级标题设置样式了,但是要是我想给指定的某个标签设置该咋办呢?这时候就用到了id和class属性。在引用我们设置的样式的时候id和class引用的方式不同,#id{} 这样可以设置指定id标签的式。.class{}这样可以设置class属性的标签。在id定义的时候不要以数字开头这样在火狐浏览器中是不起作用的。
为html设置样式的时候有三种,我们上面说的这一种叫做内部样式,这种样式是设置在html的head标签中的,第二种样式叫外部样式,这种样式要求我们创建一个.css为后缀名的文件,然后在head中通过link标签引入,引入方式是这样的<link rel="stylesheet" type="text/css" href="css/css.css"> 在href中指定html文件相对于css文件的相对路径。第三种样式叫做内联样式,内联样式的意思是在为指定标签通过style属性例如: <p style="color:red;font-size:19px"> </p> 。有时候三种样式会有重复,这个时候也叫做重叠样式。样式的定义原则是由内到外,去重取并。这是啥意思呢 ? 就是先取内联样式中有的属性然后在取内部样式有的属性,最后去外部样式中的属性。最后取三者的并集就是标签的最终属性了。
那么知道css样式是如何引入到html中的话剩下的就是为标签设置属性了,那么下面我就总结下常用的标签属性。因为本人是开发android的毕竟html常用属性不是特别熟悉。因此以下的属性是参考本人开发android经验,网上资料,同事分享所得。
所有CSS文本属性。
CSS背景属性。
a:link {background-color:#B2FF99;} //这是链接显示颜色
a:visited {background-color:#FFFF85;}//鼠标将要移动到
a:hover {background-color:#FF704D;}//鼠标在连接上移动的颜色
a:active {background-color:#FF704D;}//点击鼠标后的颜色
CSS列表属性
CSS尺寸属性
CSS定位属性
length
%
inherit2clip剪辑一个绝对定位的元素shape
auto
inherit2cursor显示光标移动到指定的类型url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help2left定义了定位元素左外边距边界与其包含块左边界之间的偏移。auto
length
%
inherit2overflow设置当元素的内容溢出其区域时发生的事情。auto
hidden
scroll
visible
inherit2overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content2overflow-x指定如何处理右边/左边边缘的内容溢出元素的内容区域auto
hidden
scroll
visible
no-display
no-content2position指定元素的定位类型absolute
fixed
relative
static
inherit2right定义了定位元素右外边距边界与其包含块右边界之间的偏移。auto
length
%
inherit2top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。auto
length
%
inherit2z-index设置元素的堆叠顺序number
auto
inherit2
通过position可以设置区块的位置,定位方式有fixed定位、relative定位、absolut定位。fixed定位一但设置好位置,当
前位置就不会随着页面的滑动而改变,relative定位和android中的相对布局相似,但是html中的相对位置是相对的区块的正
常位置的变化。absolue定位可以讲区块放到页面的任意位置。对于位置来说,还有一个float属性也和位置相关,设置float
可以将图片设置为左浮动或者右浮动。
CSS 盒子模型(Box Model)
从这张图我们可以看出,网页的盒子模型和android手机开发是相似的 ,在android定义布局文件是也会有一个最外层的父容器,通常指定最外层父容器的宽和高都是匹配
手机屏幕的,手机屏幕内又分为margin,pading,content 。而网页布局中只是在margin下有多了一个border。在border这里我们还可以设置一个outline属性,添加一个外部轮廓。
在我们定义css样式的时候,有时候标题、段落可以用一类属性,这里我说的是一类而不是一个。这个时候我们就可以把用相同属性的修饰的标签分组。分组的写法也很简单就是在选择器之间用逗号隔开就好了 。在html中经常会用到div这种区块标签。区块之间可能还有段落。这个时候有三种方式来设置区块间的段落样式。第一种,指定p的id,第二种先找到指定区块设置,格式是这样的: div.div p{color: yellow; },这个时候要是有重复样式的话,还是遵照由内到外,去重取并的原则。最后一种是通过子元素来设置属性,div.div p中 div是class p是div的子元素,因此可以div>p 这种写法设置。类似这种设置属性的还有相邻兄弟选择,普通相邻兄弟选择。就是分别设置不是本标签包含的第一个元素和其他的元素属性。写法是将>变为+和~即可。但是本人觉得这样设置属性着实不爽,故也没咋用。
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
语法
伪类的语法:
CSS类也可以使用伪类:
对于css的伪类,我觉得可以把java中的类来理解,例如java中我们定义一个person类,这个person就是我们的选择器,而person中的男人或者女人就算作伪类,选择person中的男人对其设置属性就是伪类的语法了。这里理解可能比较牵强,但是个人怎么好记就怎么来吧,编程是一门艺术,每个人对于艺术的理解定是不相同的。
以上简单总结了css的基本语法和使用,以后会不断补充添加的。
- html(2)之CSS
- DIV+CSS布局之HTML文档结构(2)
- 学习历程之HTML(Css简介)
- HTML布局之CSS
- Html之css篇
- html&css---------css简介(11/2)
- HTML css 2 css
- HTML+CSS札记(2)
- html+css学习心得(2)
- HTML+CSS之CSS格式化排版 (7)
- HTML+CSS之CSS盒模型 (8)
- HTML+CSS之CSS盒模型
- HTML+CSS之CSS格式化排版 (7)
- HTML+CSS之CSS盒模型 (8)
- 初识HTML/CSS之CSS篇
- 《HTML+CSS基础课程》之HTML
- HTML和CSS及JavaScript之HTML
- 初识HTML/CSS之HTML篇
- MongoDB 删除文档
- Spring MVC中添加log4j日志,及用slf4j做扩展
- 主调函数分配内存的两次调用
- 文章标题
- Android动画分类和区别
- html(2)之CSS
- python 安装 Beautiful Soup
- Android开发之常用必备工具类图片bitmap转成字符串string与String字符串转换为bitmap图片格式
- 图解首次使用流光5.0
- 使用Servlet实现增删改查的功能
- HDU 4005 边双联通分量
- Python与MySQL联动实例一两则
- CentOS 安装 apache
- 日期格式化 android.text.format.DateFormat