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的代码总结(部分)的更多相关文章

  1. 几个常用的CSS3样式代码以及不兼容的解决办法

    原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...

  2. css3圆角代码

    div+css3普通圆角代码示例 <style type="text/css"> #round { width:200px; height:100px; margin: ...

  3. HTML5与CSS3经典代码

    1)全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; ...

  4. css3常用代码整理

    1.圆角 .rd10{-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-khtml-border-ra ...

  5. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  6. HTML+CSS3 纯代码实现转盘效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. css3兼容代码

    1. 渐变:.gradient{ width:300px; height:150px; filter:alpha(opacity=100 finishopacity=50 style=1 startx ...

  8. css3小代码

    1.三角 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  9. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

随机推荐

  1. 转:Tomcat安装配置及站点说明

    原文地址:http://www.cnblogs.com/Johness/archive/2012/07/20/2600937.html 1.首先是Tomcat的获取和安装. 获取当然得上Apache的 ...

  2. 解决hibernate只能插入一条数据的问题

    hibernate初学,根据视频教程写好代码后,发现无论执行多少次main函数,数据库中只有一条数据,尝试多次,后来终于发现问题... 使用的工具是:MYSQL 5.7.13   eclipse 4. ...

  3. js动态改变时间

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  4. SQL Server - select语句练习

    创建表和输入数据 CREATE TABLE STUDENT(SNO VARCHAR(3) NOT NULL,   SNAME VARCHAR(4) NOT NULL,   SSEX VARCHAR(2 ...

  5. Nginx配置文件(nginx.conf)配置详解

    Nginx的配置文件nginx.conf配置详解如下: user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目 ...

  6. ORA-01720: grant option does not exist for 'xxx.xxxx' (ORA-01720 ‘XXX’ 不存在授权选项)

    原因:用户A将表tab的SELECT权限授予了用户B,而用户B将视图v_tab的查询权限授予C时,也试图将表tab授予用户C,但用户B并没有这个权限(将表tab授予用户C),而引起的 用户B没有授权选 ...

  7. ZTSD_008_1表没有某订单数据,无法回写交期

    ZTSD_008_1表没有某订单数据,无法回写交期, 取系SAP组检查执行此RFC:ZFM_FP_025_1 为什么没有将数据导进来 select * from SAPSR3.ZTSD_008_1@S ...

  8. ExtJs弹出窗口

    1.Ext.Msg.alert(String title, String msg, [Function fn], [Object scope]) 显示一个标准的带有一个"确定"按钮 ...

  9. zabbix快速安装

    运维什么的其实感觉根本没有什么好写的了,因为太简单了嘛,尤其是这个监控,整得那么麻烦要干嘛,不过貌似很多人喜欢这个,我就随手写一点吧 环境:centos7.2.1511最简安装,就是什么都不选直接就开 ...

  10. java io学习之File类

    1.先看下四个静态变量 static String pathSeparator The system-dependent path-separator character, represented a ...