博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
样式规则
阅读量:5159 次
发布时间:2019-06-13

本文共 3881 字,大约阅读时间需要 12 分钟。

标签选择器   给页面某个元素设定样式
关联类选择器
    标签名.类名   给同一元素定义不同的样式规则
独立类选择器    .类名
    
    给不同元素定义同样的样式规则 
ID选择器
    #ID 用来定义某一定义功能的标签元素
关联选择器
    用空格隔开的两个或多个单一选择器  P EM{background:yellow}  > EM{background:yellow}
组合选择器
    多个选择器之间用 , 分开
伪元素选择器
    HTML元素:伪元素{属性:值}
widht  height 指的是内容大小   当设置padding时候 内容大小不变 但是装着内容的div 会变大 而没有设置Padding 是因为内容和边框是重合了的
背景
   
   位置
    布局
    边缘
    列表
    其他
    CSS滤镜  
字体 
文本   
9大属性
背景: 背景色,背景图像,背景图像的控制 
background-color
 
background-image 
background-repeat 
 
background-position 
位置:CSS-P中的内容 用来控制网页元素在浏览器文档窗口的位置 position  z-index
字体:  字体,大小,颜色,显示效果,下划线,粗细 
 
font-family  什么字体  
font-size  字体大小  
font-style 粗体还是斜体 
text-decoration 
下划线
 
font-weight 字体多粗
    font-variant
  让字母大写
    text-transform 设置字母大小写
布局:设置元素在网页中如何放置 属性包括 visibility display 
overflow float clear 
float:块级元素浮动起来就变成行内元素
边缘:margin padding width 设置4个边框粗细 border-方向-width color border-方向-color style 设直线虚实 
列表: ol ul  用于设置列表项标记的类型,列表图片和位置 list-style-type list-style-image list-style-position
其他:cursor 设置鼠标移动到某元素上的形状
 filter:设置元素的滤镜特效 多媒体滤镜特效 有边界区域的元素,表格 图片等 才能使用CSS滤镜特效  类似P 没有边界区域的无法使用 
设置这些元素的 高宽 变成区域元素后 CSS滤镜可以使用
实现滤镜,设置filter属性的各种参数 filter设置多个参数值 之间用空格分开 有的参数由若干子参数组成
1、alpha 设置元素透明度 需要设置子参数 alpha(Opacity=?,FinishOpacity=?,Style=?StartX=?,StartY=?,FinishX=?,FinishY=?)
Opacity 0-100 0代表全透明  
FinishOpacity可选参数 设置渐变透明,指定结束时透明度  
Style 设置渐变透明样式 0代表同一形状 1代表线形  2 3
X Y渐变透明的开始和结束为止 2围
2、BlendTrans 设置元素淡入淡出效果 需要设置子参数 
BlendTrans
 (
Duration=?) 淡入淡出时间
3、Blur 用于建立模糊效果 像手在没干的油画上划过的效果 需要设置子参数 Blur(Add=?,Direction=?,Strength=?)
Add 是否单方向模糊,true(非0) false(0) D 设置模糊方向 S 代表有多少像素的宽度将受到影响 
4、Chroma 用于把指定的颜色置为透明 也就是过滤掉某种颜色 需要设置子参数 Chroma(Color=?) 颜色
5、DropShadow 用于建立阴影效果 需要设置子参数 (Color=?,OffX=?,OffY=?,Positive=?)
C 指定阴影颜色 X Y 指定印象相对于元素的偏移量 P true 表示建立外阴影 false 内阴影
6、FlipH 将元素水平反转 7、FlipV 将元素垂直反转
8、Glow 用于设置元素边缘产生类似发光效果 需要设置子参数 (Color=?,Strength=?) c 指发光颜色 S 指发光强度 1-255
9、Gray 用于去掉图像的色彩,显示为黑白图像  不用设置子参数 10、Invert 用于反转图像颜色,产生类似底片效果
11、Light 用于设置光源效果,类似模拟光源照射物体的投影效果
12、Mask 用于在元素表面覆盖一个透明遮罩层 其效果类似带着有色眼镜看物体一样 需要设置子参数(color=?) 设置遮罩层颜色
13、RevealTrans 用于建立元素初始显示的转换效果 需要设置子参数 (Duration=?Transition=?) 切换时间  切换方式0-23
14、Shadow 用于建立令一种阴影效果 需要设置子参数 color 阴影颜色 Direction 投影方向 
15、Wave 用于实现波纹效果 需要设置子参数 add 设置原对象是否按照波纹样式扭曲 freq 设置完成波纹个数 LightStrength 设置波浪效果的光照强度
    
    0-100 phaes 设置波浪的起始角度 0-100百分比  strength 设置波浪幅度
16、Xray 用于显现图片的轮廓,产生X光片效果 不需要子参数
字体:  字体,大小,颜色,显示效果,下划线,粗细 
 
font-family  什么字体  
font-size  字体大小  
font-style 粗体还是斜体 
text-decoration 
下划线
 
font-weight 字体多粗
    font-variant
  让字母大写
    text-transform 设置字母大小写
color 字体颜色
font 可以定义关于字体的所有属性
文本:文字间距 对齐方式  首行缩进 设置文本所在行的行高 line-height: 可以是精确数字也可以是140% 表示行高等于文字大小的1.4倍
word-spacing 文字间距
    letter-spacing 字符间距 vertical-align 垂直对齐方式 可以是相对于元素行高的百分比
text-align 文本水平对齐方式 text-indent 第一行缩进值 white-sapce
背景: 背景色,背景图像,背景图像的控制
background-color 设置背景色  设置成 transparent表示透明背景色  
background-image 背景图像 url(图片地址)
background-repeat: 设置背景图像是否重复显示  不重复 或者x y方向重复  
background-attchment  fixed标识不随内容滚动 scroll 表示随内容滚动   
background-position  设置背景图像水平和垂直位置 
background 可以定义关于背景的所有属性
位置:CSS-P中的内容 用来控制网页元素在浏览器文档窗口的位置
position:绝对定位 相对定位 无特殊定位  absolute relative static
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
绝对定位能精确定位元素在页面的独立位置,不考虑页面上其他元素的位置
相对定位所设定的位置值是相对于元素通常应在的位置的偏移量 
如果父元素relative,子元素absolute 那么子元素的位置 是参照relative设定的
z-index:使用定位后,同一局域可能有元素堆叠,z-index用于设置这些堆叠元素的层叠顺序
z-index 属性大的在上 默认为0 负的在下 默认各元素堆叠,后出现的在上
div span 是常用标签
一般CSS-P 作用于div 
当把文字 图像 元素放在div中时 就可以称为 div block 层,是指div标签中的内容 改变层的属性,嵌套在其中的元素可以随之出现,消失,更改,移动等 
布局:设置元素在网页中如何放置 属性包括 visibility 设置元素课件状态 display:设置元素显示状态
inherit 继承父层的显示特性 visible显示在网页中 hidden 隐藏
block 元素的前后都会有换行 inline 元素前后都不会有换行
list-item 与block相同,但增加目录表项标记 none不显示元素 隐藏元素加快浏览器
clip:定义使用绝对定位元素可视区域 (顺时针)
overflow:元素中内容超出元素大小,设定元素的高宽后,导致元素中内容溢出(visible 增加元素的显示空间大小
hidden保持元素显示不变,裁剪掉多余 scroll 显示滚动 auto 只有在内容超出元素才显示滚动条
==============================================
1、浏览器默认会给body 添加margin值

转载于:https://www.cnblogs.com/TT-Cartier/p/4691069.html

你可能感兴趣的文章
How Crushing Machinery Industry Better Develops Itself
查看>>
Spring框架的事务管理之声明式事务管理的类型
查看>>
身为多年的ubuntu用户。。。
查看>>
Educational Codeforces Round 24
查看>>
并查集 - 优化
查看>>
中文论文-LaTex模板
查看>>
P3538 [POI2012]OKR-A Horrible Poem
查看>>
CUDA高性能编程中文实战11章例子中多设备的例子编译提示问题
查看>>
Centos下安装软件的常用方法
查看>>
微信公众平台开发——为何不能在网页调用微信jsapi?
查看>>
emacs设置代理访问插件仓库
查看>>
wireshark自动化之tshark命令行
查看>>
Linux中more命令的实现
查看>>
【递归】二叉树的深度
查看>>
工程源码github地址
查看>>
MediaRecord与AudioRecord
查看>>
高性能网站架构设计之缓存篇(5)- Redis 集群(上)
查看>>
个人项目最终总结
查看>>
day13_先沃联盟定时任务
查看>>
day09_mysql——AB复制
查看>>