关于CSS3的代码总结(部分)
1. 构造样式表:selector{
Property:value;
Property:value;
}
Selector是需要更改样式的元素,property为css属性的名称,value应用的哪种格式
2. /* 注释 */
3. 当规则发生冲突时,服务器优先选择特殊性强的;靠后出现的;带有!important的
4. CSS属性的值可分为:继承值(在value处输入inherit),预定义值(left,right,none),长度或者百分数,纯数字,颜色
5. CSS颜色分为:RGB(color:rgb(红,绿,蓝))(均用0~255数字表示);十六进制数(color:#红色绿色蓝色)(蓝色可转化为十六进制);RGBA(红色,绿色,蓝色,透明度)(透明度用0~1之间的小数表示,其中1表示完全不透明);HSL(色相,饱和度,亮度)(色相用0~360之间的数,其余两项用百分数);HSLA(色相,饱和度,亮度,透明度)
6. 把相应的规则打到制定文本中,以.css结尾保存来创建外部样式表
7. 链接外部样式表:在head部分输入<link rel=”stylesheet” href=”url.css” />(rel属性和href之间有空格,结尾有一个空格)
8. 创建嵌入样式表:在head部分输入<style></style>(中间添加任意数量的样式规则)
9. 应用内联样式:在需要进行格式化元素开始的标签中输入style=””(中间可以添加任意数量的样式规则,用分号隔开)
10. 样式层叠和顺序规则:在其他条件相同的条件下,越晚的样式优先性越高(内联样式会覆盖与之冲突的其他样式)
11. 与媒体相关的样式表:1)在link或者style开始标签中输入media=”print/screen/all”;
2)直接输入@media print/screen/all{}(中间添加样式,用分号隔开)
12. 构造选择器:
1) 依据元素的类型或名称。
格式:要选择的元素的名称(例:h1){属性的名称;应用的格式;}(例color;red)
2) 依据元素所在的上下文。
格式:上下文(例 h1)要选择的元素的名称(例em){属性的名称;应用的格式;}
a) 在样式表中输入ancestor(要格式化元素的祖先) (可以继续根据情况输入ancestor) descendant(要格式化的元素) {属性的名称;应用的格式;}
b) 在样式表中输入parent(包含要格式化元素的选择器)>(可以根据情况继续输入parent) child(要格式化的元素){属性的名称;应用的格式;}
c) 在样式表中输入sibling(同一父元素中的,直接出现在目标元素前的元素)+(可以根据情况继续输入sibling)element(要格式化的元素){属性的名称;应用的格式;}
3) 依据元素的类或ID
4) 依据元素的伪类或伪元素。
5) 依据元素是否有某些属性和值
13. 选择第一个或最后一个子元素:
输入想应用样式的第一个或最后一个子元素(可选步骤);选择第一个/最后一个子元素输入 :first-child/last-child{属性的名称;应用的格式;}
14. 选择元素的第一个字母或者第一行:
输入element(要格式化元素的选择器):first-letter(第一个字母){属性的名称;应用的格式;}
输入element(要格式化元素的选择器):first-line(第一行){属性的名称;应用的格式;}
关于CSS3的代码总结(部分)的更多相关文章
- 几个常用的CSS3样式代码以及不兼容的解决办法
原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...
- css3圆角代码
div+css3普通圆角代码示例 <style type="text/css"> #round { width:200px; height:100px; margin: ...
- HTML5与CSS3经典代码
1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; ...
- css3常用代码整理
1.圆角 .rd10{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-ra ...
- CSS3 旋转代码备忘
.Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...
- HTML+CSS3 纯代码实现转盘效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- css3兼容代码
1. 渐变:.gradient{ width:300px; height:150px; filter:alpha(opacity=100 finishopacity=50 style=1 startx ...
- css3小代码
1.三角 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
随机推荐
- linux命令行与shell脚本编程大全---更多bash shell命令
进程状态:0代表正在运行:S代表在休眠:R代表可运行,正等待运行:Z代表僵化,进程已经结束但父进程已不存在:T代表停止. 查看有那些进程运行:ps -ef 基本的linux文件系统: 1.ext文件 ...
- 关于sql server远程访问Oracle数据库 OpenQuery查询返回多条数据的问题
在Sql Server远程访问Oracle 中的数据库表时: 远程语法通常为: select * from OpenQuery(Oracle链接服务器名称,‘查询语句’) eg: select * f ...
- PNG与iOS优化选项
从App Store下载到的每一枚App最初都是一只IPA文件(其实是zip格式,内含特定规则的文件夹组织方式).但当作zip解开之后会发现里面很多的PNG文件看不了,这是因为在这些PNG图像都已被i ...
- 44. Decode Ways && Gray Code
Decode Ways A message containing letters from A-Z is being encoded to numbers using the following ma ...
- win7,xp通用的打开文件浏览对话框的方法
第一种:Function BrowseForFile() Dim shell : Set shell = CreateObject("WScript.Shell") ...
- 【转】用C#调用Windows API向指定窗口发送
一.调用Windows API. C#下调用Windows API方法如下: 1.引入命名空间:using System.Runtime.InteropServices; 2.引用需要使用的方法,格式 ...
- MVC导出Excel,提供下载Excel
类1: using System.Collections.Generic;using System.Data;using System.Web.Mvc;using System.IO;using Sy ...
- mac 下 chrome 语言环境 设置
当然,如果把系统语言更改为英文,Chrome.QQ 等一系列软件会自动变成英文界面,而且没有提供切换语言的设置. 啪了下 Google,找到了方法,直接在终端运行后重启 Chrome 即可更改. 英文 ...
- NHibernate系列文章二:创建NHibernate工程
摘要 这篇文章介绍了如何创建一个简单的使用NHibernate的控制台应用程序,包括使用NuGet.简单的配置.单表映射.对NHibernate配置文件添加智能提示.使用ISessionFactory ...
- Mysql数据库的使用经验总结
1. 对mysql插入中文的时候显示乱码,搞了很多天,把服务端.客户端和数据库的编码全改为u8了又重新创建数据库和表还是不行,到最后却发现没有乱码!原来只是windows的cmd没有支持u8,换个客户 ...