CSS3主要的几个样式笔记

1、边框:
border-color:
    设置对象边框的颜色。
    使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。

border-radius :设置边框圆角
    第一个值是水平半径。
    如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
    如果任意一个值为0,则这个角是矩形,不会是圆的。
    值不允许是负值。
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;

box-shadow:设置阴影
    要设置四个值: 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
    -moz-box-shadow:2px 2px 2px #ccc;
    -webkit-box-shadow:2px 2px 2px #ccc;
    box-shadow:2px 2px 2px #ccc;

2、颜色
HSL color:hsl色彩模式
    要设置三个值:
        <length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
        <percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
        <percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
        例如:background-color: hsl(240,100%,50%);

HSLA color
    要设置四个值:
        <length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
        <percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
        <percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
        <opacity> : alpha(透明度)。 取值在0到1之间;
        例如:background-color:hsla(240, 90%, 70%, 0.2);

opacity
    由浮点数字和单位标识符组成的长度值。不可为负值。
    声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。
    1到0之间的任何值都表示该元素的透明程度。
    例如:cpacity:0.2   可用于设置背景,图片,字体等

RGBA color
    要设置四个值:
    <length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
    <percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
    <percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
    <opacity> : alpha(透明度)。 取值在0到1之间;
    例如:background-color:rgba(200,200,200,0.3);

3、文本
text-shadow    
    设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。
    要设置三个值:
        <color> : 指定颜色。
        <length> : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
        <opacity> : 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
        例如:text-shadow:#ccc 2px 2px, #dae 1px 1px;

text-overflow
    设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
        clip: 不显示省略标记(...),而是简单的裁切。
        ellipsis: 当对象内文本溢出时显示省略标记(...)
        注意:要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

4、用户界面
resize
    使元素的区域可缩放,调节元素尺寸大小。适用于任意获得"overflow"条件的容器。
        none: UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
        both: UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
        horizontal: UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
        vertical: UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
        inherit: 默认继承。
        用的比较多的就是textarea,让它

outline
    outline (轮廓)是给元素周围绘制轮廓外边框,通过设置一个数值使边框边缘的外围偏移,可起到突出元素的作用。
    outline 属性可设置元素周围的轮廓线。
    轮廓线不会占据空间,也不一定是矩形。
    outline 属性是一个简写属性,用于设置元素周围的轮廓线。
        要设置四个参数:
            <outline-color>: 指定轮廓边框颜色。
            <outline-style>: 指定轮廓边框轮廓。
            <outline-width>: 指定轮廓边框宽度。
            <outline-offset>: 指定轮廓边框偏移位置的数值。
            inherit: 默认。

outline-width
    outline-width 属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none 时,这个宽度才会起作用。
            thin: 定义细轮廓。
            medium: 默认。定义中等的轮廓。
            thick: 定义粗的轮廓。
            <length> : 定义轮廓粗细的值。

outline-style
    设置一个元素的整个轮廓的样式
        默认值,定义无轮廓。
        dotted: 定义一个点状的轮廓。
        dashed: 定义一个虚线轮廓。
        solid: 定义一个实线轮廓。
        double: 定义一个双线轮廓。双线的宽度等同于outline-width的值。
        groove: 定义一个3D凹槽轮廓。此效果取决于outline-color的值
        ridge: 定义一个3D凸槽轮廓。此效果取决于outline-color的值
        inset: 定义一个3D凹槽轮廓。此效果取决于outline-color的值
        outset: 定义一个3D凸槽轮廓。此效果取决于outline-color的值

outline-offset
     可以让轮廓偏离容器边缘,即可以调整外框与容器边缘的距离。
         <length>: 定义轮廓距离容器的值。
        inherit: 默认继承。

outline-color
    设置一个元素整个轮廓中可见部分的颜色。

5、基础合模型
    overflow
        检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
            visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
            auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
            hidden: 不显示超过对象尺寸的内容
            scroll: 总是显示滚动条

overflow-x
        检索或设置当对象的内容超过其指定宽度时如何管理内容。
            visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
            auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
            hidden: 不显示超过对象尺寸的内容
            scroll: 横向显示滚动条

overflow-y
        检索或设置当对象的内容超过其指定高度时如何管理内容。
            visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
            auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
            hidden: 不显示超过对象尺寸的内容
            scroll: 纵向显示滚动条

6、其他模块
    columns
        可以同时定义多栏的数目和每栏宽度
        -webkit-columns:宽度 || 栏目数

7、选择器
    子串匹配的属性选择符
        E[att^="val"]    匹配具有att属性、且值以val开头的E元素
        E[att$="val"]    匹配具有att属性、且值以val结尾的E元素
        E[att*="val"]    匹配具有att属性、且值中含有val的E元素

结构性伪类
        E:root    匹配文档的根元素。在HTML中,根元素永远是HTML
        E:nth-child(n)    匹配父元素中的第n个子元素E
        E:nth-last-child(n)     匹配父元素中的倒数第n个结构子元素E
        E:nth-of-type(n)    匹配同类型中的第n个同级兄弟元素E
        E:last-child         匹配父元素中最后一个E元素
        E:first-of-type         匹配同级兄弟元素中的第一个E元素
        E:only-child         匹配属于父元素中唯一子元素的E
        E:only-of-type         匹配属于同类型中唯一兄弟元素的E
        E:empty             匹配没有任何子元素(包括text节点)的元素E

UI元素状态伪类
        E:checked         匹配所有用户界面(form表单)中处于选中状态的元素E
        E:enabled         匹配所有用户界面(form表单)中处于可用状态的E元素
        E:disabled         匹配所有用户界面(form表单)中处于不可用状态的E元素
        E::selection     匹配E元素中被用户选中或处于高亮状态的部分

否定伪类
        E:not(s)         匹配所有不匹配简单选择符s的元素E

目标伪类
        E:target        匹配相关URL指向的E元素

通用兄弟元素选择器
        E ~ F             匹配E元素之后的F元素

时间: 2024-12-28 16:40:07

CSS3主要的几个样式笔记的相关文章

纯CSS3实现漂亮的价格表样式代码

分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main"> <p style="text-align: center; padding: 30px; font-size: 16px"> <a href="index.html">DEMO 1</a>    <a href=&q

CSS3实现绚丽的飘带样式菜单

CSS3的强大毋庸置疑,下面就介绍一个用CSS3中 transition 属性实现的飘带样式菜单. 简要说明:就是实现鼠标移动到每一栏时,当前栏凸起.变色,鼠标移开后恢复原状. 一.效果图 hover之前 hover 时 二.简要布局 这部分很简洁,废话不多说,直接上代码,如果代码看不懂,那说了也是白搭: <div class='ribbon'> //外部容器 <a href='#'><span>Home</span></a> //容器内部元素

CSS3学习系列之盒样式(二)

text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略号"-".但是,text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效.例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha

繁星CSS3之旅-CSS基本样式-CSS背景

CSS背景 1.背景 CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 (1)设置背景颜色 例: <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="styl

CSS3学习系列之布局样式(一)

多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用float属性进行页面布局的示例</title> <style> div { width: 20em; floa

CSS3的REM设置字体大小——笔记

px单位 比较稳定精确,但在浏览器中放大缩小页面时会出现问题:用户改变浏览器字体,会使页面布局被打破,因此提出使用"em" em单位 它需要一个参考点,一般以<body>的"font-size"为基准.比如使用"1em"来改变默认值"1em=16px",这样一来,设置字体"14px"时,只需要将其设置为"1.4em" body { font-size: 62.5%;/*10

常用标签和样式笔记整理

注释:html<!--内容--> css/*内容*/ 图片:<img src="#" title="鼠标滑过显示的文本" alt="图片替换文本">title是专门做提示信息的,alt是碰到图片加载不出来的情况会有文字替代. 图片可以自己设置宽高,致谢高或者宽,图片会等比例缩放. 链接:<a href="#" target="_blank">是新页面的打开 <a h

CSS3学习系列之背景相关样式(一)

新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background-break:指定内联元素的背景图像进行平铺时的循环方式 background-clip属性 在HTML页面中,一个具有背景的元素通常由元素的内容.内容补白(padding).边框.外部补白(margin)构成. 元素背景的显示范围在css2与css2.1.css3中的并不相同,在css2中,背景的

利用css3修改input[type=radio]样式

<form> <div> <input id="item1" type="radio" name="item" value="选项一" checked> <label for="item1"></label> <span>选项一</span> </div> <div> <input id=&qu