css使用总结
来源:互联网 发布:多组数据的显著性差异 编辑:程序博客网 时间:2024/06/05 17:21
CSS使用总结
- CSS使用总结
- 使用CSS的三种方式
- 外部样式表
- 内部样式表
- 内联样式
- 选择器
- ID选择器
- 类选择器
- 元素派生选择器
- 属性选择器
- 布局常用属性
- 使用CSS的三种方式
使用CSS的三种方式
1.外部样式表
样式应用于多页面。
<head> <link rel="stylesheet" type="text/css" href="test.css" /> </head>
2.内部样式表
使用 <style>
标签在文档头部定义内部样式表。
<head><style type="text/css"> body {margin:0; padding:0;}</style></head>
3.内联样式
利用所有标签都有的style属性。
<p style="color: blue; margin-left: 20px;font-size:12px"> 优先级:属性选择器>id选择器>类选择器>元素选择器</p>
选择器
ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
格式:#id名{ 属性:值;}
类选择器
把某一个样式应用到相同的HTML元素上。
格式1:.类名{ 属性:值;}
格式2:元素.类名{ 属性:值;}
元素(派生)选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
格式:元素 { 属性:值;}
属性选择器
对带有指定属性的HTML元素设置样式。
格式:[属性名]{属性:值;}
布局常用属性
什么叫布局?
将有限的视觉元素进行有机的排列组合。
常用属性:
margin:外边距。(居中:{margin:0 auto})
padding:内边距。
width:宽度。
height:高度。
background:背景。
position:元素定位。
font-size:字体尺寸。
font-weight:字体粗细。
text-align:对齐方式。
line-height:行间的距离(行高)。
float:浮动。
overflow:规定当内容溢出元素框时发生的事情。
clear:规定元素的哪一侧不允许其他浮动元素。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .main{ margin:0 auto;} .left{ width:20%; height:600px; background:#ccc; float:left;} .right{ width:80%; height:600px;background:#FCC; float:left} .r_sub_left{ width:20%; height:600px; background:#9C3; float:left} .r_sub_right{ width:80%; height:600px; background:#9FC; float:right;} .footer{ height:50px; background:#9F9; clear: both;} </style></head><body><div class="top">top</div><div class="main"> <div class="left">left</div> <div class="right"> <div class="r_sub_left">sub_left</div> <div class=" r_sub_right">sub_right</div> </div></div><div class="footer">footer</div></body>
展示:
0 0
- CSS Hack 使用总结
- CSS使用学习总结
- css使用技巧总结
- CSS使用总结
- css使用总结
- css pie.htc使用总结
- FLEX实践—使用CSS的总结
- CSS中position属性的总结使用
- Html使用CSS自定义字体的总结
- 【CSS】CSS样式总结
- 【CSS+DIV】CSS总结
- CSS总结
- CSS总结
- CSS总结
- CSS总结
- css总结
- css总结
- css总结
- Java使用SSH远程访问Windows并执行命令
- debian重置root密码
- UE4 editor Camera speed setting
- 前台生成验证码
- Nginx搭建HTTPS服务器
- css使用总结
- c语言基础(2)--c语言概述
- Android学习之路------代码中获取Logcat打印日志并存放于文件中
- D - Ignatius and the Princess III(DP方法)
- servletContext
- AVL树插入删除
- .Net框架搭建之2、SQL Server MEF依赖注入 MVC Repository框架
- 如何使用fiddler2拦截移动端app的数组请求
- 适配——Drawable适配,占用内存测试