css高级属性有哪些

html-css021

css高级属性有哪些,第1张

CSS3高级属性可分为:选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS边框和圆角transform:可以旋转、缩放、倾斜、平移的元素;border-radius:圆角;单独分离:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius左上角,右上角,右下角,左下角。第一个值:左上角, 第二个值:右上角、左下角,第三个值:右下角第一个值:左上角、右下角,第二个值:右上角、左下角四个圆角值相同box-shadow:阴影;投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色border-image:边框图片; background-image:多个图片路径;background-size:设置图片大小background-position:为多个图片路径设定位置;background-repeat:为多个路径设置图片显示是否重复;background-origin:指定图像的区域 background-clip:指定位置开始绘制。 注意:背景颜色只能设置一个background:图片路径 显示位置 是否重复,图片路径 显示位置 是否重复·········· CSS渐变色css有两种类型的渐变:线性渐变和径向渐变线性渐变:创建一个线性渐变,至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)background:linear-gradient(颜色···········) 默认从上到下·background:linear-gradient(to right,颜色···········) 从左到右·background:linear-gradient(to left,颜色···········) 从右到左·background:linear-gradient(to top left ,颜色···········) 从右下到左上·也可以按照角度来渐变background: linear-gradient(0deg, red, blue)重复的线性渐变:background: repeating-linear-gradient(red, yellow 10%, green 20%)径向渐变:至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,也可以指定渐变的中心、形状、大小。默认渐变的中心是 center,渐变的形状是 ellipse(椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。background: radial-gradient(位置,[形状], 颜色 【百分比】··················)CSS文本效果 文本属性:text-shadow:偏移量 向下大小 模糊度 颜色box-shadow:使用于盒子阴影word-wrap:break-word换行word-break:单词拆分换行属性指定换行white-space:处理元素中的空白

1.后代选择器:E F 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

  <style>ul  li{

            color: red   } </style>

<ul>

        <li>我是ul里面的li</li>

        <li>我是ul里面的li</li>

        <li>我是ul里面的li</li>

    </ul>  li是ul的孙子级别

    <ul>

       <p><li>我是ul里面的li</li></p>

        <p><li>我是ul里面的li</li></p>

        <p><li>我是ul里面的li</li></p>

    </ul>  li是ul的孙子级别

后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入,空格可以多 但是不可以插入其他的符号以免造成干扰。 li 被 ul包裹的情况下 颜色变红

2.子选择器:E>F 选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

  <style>div span{

            color: red   }

        h2 >span{ color: green} </style>

 <div>

     <p><span>早上好</span></p>

        <p><h1><span>我是标题</span></h1></p>

        <h2><span>晚上好</span></h2>

    </div>

div元素中包裹的子元素span 显示为红色,h2元素中包裹的子元素span显示为绿色,>左右可以添加空格

3.相邻选择器: E+F 相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

 <style>.main+p{

            background: green} </style>

<div>     <p>我是谁</p>

        <p class="main">我是谁</p>

        <p>我是谁</p>     </div>

类选择器main相邻的下一个p背景色变绿

4.通用选择器:E~F 通用兄弟选择器 选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

<style>  .ab~p{

    background: red} </style>

<div>    <p class="ab">111</p>

        <p>222</p>

        <p >333</p>

        <p>444</p>

        <p>555</p>    </div>

类选择器ab下面的所有p标签都会变成红色

1.E[attr]属性选择器: E[attr]  选择匹配具有属性attr的E元素

<style>  dd[class]{

      background: red}  </style>

 <dl>  <dt>汽车</dt>

        <dd>宝马</dd>

        <dd class>奔驰</dd>

        <dd>奥迪</dd>   </dl>

 [ ]表示属性的意思 里面写具体属性的名称比如 [id]

2.E[attr=val]属性选择器:E[attr=val]  选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)

<style>   dd[class=two]{

            background: red   } </style>

<dl>  <dt>标题</dt>

        <dd class="one">我是定义列表1</dd>

        <dd class="one">我是定义列表1</dd>

        <dd class="two">我是定义列表2</dd>   </dl>

E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中,dd元素中class的值为two的背景颜色变成红色

3.E[attr*=val]属性选择器: 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”

   dd[class=two]{<style>p[class*=b]

属性后面的值加不加引号(包括单引号和双引号)都可以 当时遇到特殊符号需要加引号

            background: red   } </style>

<div>  <p >111</p>

        <p class="b1">222</p>

        <p class="b2">333</p>   </div>

p元素中class的值只要包含b的背景色都会变成红色,

4.E[attr^=val]属性选择器:E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串

<style>  a[href^='http://']{

            background:red  } </style>

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号(单引号和双引号)包裹一下

<a href="http://www.baidu.com">跳转百度</a>

    <a href="www.baidu.com">不能跳转百度</a>

表示 属性href是以http开头的a元素 背景色变成红色

5.E[attr$=val]属性选择器:E[attr$=val]  选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串

  a[href^='http://']{<style>a[href$=".cm"]

            background:red  } </style>

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号(单引号和双引号)包裹一下

<a href="http://www.baidu.com">能跳百度</a>

    <a href="http://www.baidu.cn">因为百度把.cm的域名也买了所以也能跳了</a>

表示 属性href是以cn结尾的a元素 背景色变成红色

高级中

hover 的作用是你鼠标移动到上边的链接出现的样式,即将要被访问的

link 的作用是未被访问的链接出现的样式,即没有被访问的

active的作用是你鼠标点击的链接出现的样式,即正在被访问的

visited的作用是表示已经点击的链接出现的样式,即被访问过的

标签中是根据你选择标签里边的你所选择代码所出现的样式,有table表格啊什么的

类的话应该是其他两种没有的情况下自定吧