正在奋踏的少年

关于前端的学习

css样式——Cascade Style Sheet 级联样式单

一:css样式编写3种方式

1.内联样式(inline):使用style属性声明在元素中

  eg: <div style=" "> </div>

2.内部样式(inner):写在style标签里

 eg:<head><style type="text/css">...</style></head>

3.外部样式(outer):创建一个独立的.css文件

<head>

   <link rel="styleSheet" type="text/css" href="x.css"/>

</head>

3种方式的使用原则:

(1)内联样式只对当前元素有效;内部样式对当前整个页面有效;外部样式对所有引用它的页面都有效(可用于控制全站的风格

(2)内联样式尽量少用;内部样式可以适量使用(全站中只有一个页面中使用的样式)推荐使用外部样式(外部文件不要太多)。

补充:css样式的优先级

!important>内联样式>内部/外部样式(#ID选择器>类选择器/伪类选择器>元素选择器)>浏览器预定义样式

二.css基本语法:

   属性名:属性值;

内部/外部css:

   选择器{

  属性名:属性值;

   ...

  属性名:属性值;

}

(一)CSS选择器(重点)

   1.基本选择器:(说明:javascript/jquery中也可以使用类似css中的选择器进行元素的选择)

  (1)通用选择器:*{...}   选择页面中的所有元素(所有页面几乎都要写这个,不写就默认,浏览器不同,所有默认值就不同);

            eg:*{
                       margin:0;
                       padding:0;

                   }

   (2)元素选择器:元素名{...}  选择指定的元素 eg: div{...}  ,p{...} 等元素;

   (3)ID选择器: #ID值{...}  仅选择具有指定ID的元素;

   (4)类别选择器: .类名{...} 选择具有指定class的所有元素

   (5)并列/过滤选择器:选择器1选择器2{...}  选择可被两个选择器同时选定的元素

   (6)父子选择器:选择器1 选择器2{...}选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素。

   (7)直接子元素选择器:选择器1>选择器2{...}选择选择器1中的直接子元素中可被选择器2选中的元素(    IE6不支持)

   (8)多选选择器:选择器1,选择器2,...选择器n{...}选择可被任何一个选择器选中的元素

   (9)伪类选择器:  :伪类名{...}

         1)连接伪类

            : link,适用于尚未访问的链接

           eg:   a:link{
                             color:#004276;
                             text-decoration:none;

                            }

           :visited,适用于访问后的链接

                   a:visited{
                             color:#004276;

                            }

          2)动态伪类

           :hover ,适用于鼠标悬停在HTML元素时,div、p、a等元素都可用

           eg:    a:hover{
                        color:#BA2636;
                        text-decoration:underline;

                   }

                   div:hover{
                        color:#BA2636;
                        border:1px solid  red;

                   }

        3)动态伪类

          :active,适用于HTML元素被激活时(鼠标点击放开后)

              eg:   a:active{
                      color:yellow; 

                     }

        4)动态伪类

           :focus,适用于HTML元素获取焦点时

              eg:   input:foucs{
                      border:1px solid red;

                     }

         5)目标伪类选择器(ie8不支持)

            :target,目标元素的选定

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	a:target{border: 2px solid #f00;}
	div{display:none;}
	div:target{border: 2px solid #f00;
	display:block;
	}	
</style>
</head>
<body>
<a href="#lian1">链接1</a>
<a href="#lian2">链接2</a>
<a href="#lian3">链接3</a>
<a href="#lian4">链接4</a><br/>
<a name="lian1">锚点1:链接1的目标元素</a>
<div id="lian2">锚点2:链接2的目标元素</div>
<div id="lian3">锚点3:链接3的目标元素</div>
<div id="lian4">锚点4:链接4的目标元素</div>
</body>
</html>

      6)状态伪类(一般用于表单,更多用于js)

         :enabled    input:enabled{...}    匹配当前启用的表单元素

         :disabled            :disabled{...}   匹配当前禁用的表单元素

         :checked             :checked {...}   匹配当前选定的表单元素 

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	input:enabled{
		border:1px solid #ff0000;
	}	
	:disabled{
		background-color:aqua;
	}
	:checked{
		box-shadow:6px 6px #666;
	}
</style>
</head>

<body>
<form action=""  >
<label for="t1">用户名:<input type="text" name="text1" id="t1"></label><br/>
<label for="p1">密 码:<input type="password" name="password1" id="p1"></label><br/>
<input type="radio" name="x1">男
<input type="radio" name="x1">女<br/>
<select>
	<optgroup label="地址">
	<option value="cq">重庆</option>
	<option value="gz">广州</option>
	<option value="sh">上海</option>
	</optgroup>
</select><br/>
<textarea>请输入你的签名...</textarea><br/>
<input type="checkbox">我同意就接受此条款<br/>
<input type="submit" value="提交" disabled="true">
<input type="reset" value="重置">
</form>
</body>
</html>

      7)   结构伪类

        :last-child             p:last-child{...}   匹配所有同级中的最后一个p元素

                                         p :last-child{...}  匹配p下最后一个子元素

        :only-child            p:only-child{...}   匹配所有同级中的唯一的一个p元素

        :first-child             div: first-child{...}  匹配父元素中的第一个子元素(必须是标签,纯文本不算)

        :empty                 div:empty{display:none;}    匹配没有子元素的元素(且没有任何文本内容的元素)           

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	div :first-child{
		border:1px solid #ff0000;
	}
	div:first-child{
		background-color:aquamarine;
	}
	div :only-child{
		padding: 10px;
	}
	
</style>
</head>
<body>
<div id="div1">
	<p>文本1</p>
	<p>文本2</p>
	<span>文本3</span>
<div>
	<p>文本4</p>
</div>
</div>
<div id="div2">
12343345
<span>文本8</span>
	<p>文本5</p>
	<p>文本6</p>
	<span>文本7</span>
	<p>文本8</p>
</div>
<div>
	<div>div1</div>	
</div>
</body>
</html>         

   2.css复杂选择器:(提示:使用jquery可以兼容所有下述复杂选择器;复杂选择器的使用可以减少页面中id和class的出现频率。)

   

复杂选择器示例                含义            版本/兼容性
选1  选2div ul{...}子代选择器css1
选1>选2div>ul{...}直接子代选择器css2
选1+选2input+span{...}对紧跟在input后的一个span设样式相邻兄弟选择器:选择紧挨着的下一个兄弟元素(选中0/1个)


css2

/IE6不支持

选1~选2div~span{...}查找某一个指定元素的后面的所有兄弟节点。通用兄弟选择器:匹配选择器1的兄弟元素中匹配选择器2的元素。


css3

注意:div后的兄弟会选定,之前的不会。

[属性名]

[href]{

text-decoration:none;

color:red;

}

选择具有指定属性的元素css2
[属性名=属性值]

[type="text"]{

border:2px solid green;

}

匹配具有指定属性且属性值为指定值css2
[属性名~=属性值]必须出现完整单词[class~="strong“]{...}可以选定引号内出现了strong这个单词匹配具有指定的属性且属性值中包含指定的单词。(必须是完整的单词,不是单词不行)css3

[属性名*=属性值]

只需要出现指定字母

[class*=str]可以选定引号内出现了str这三个字母匹配具有指定的属性且属性值中包含指定的字母组合(不必是完整的单词)css3

[属性名^=属性值]

头(字母)

[class^=str]匹配具有指定的属性,且属性值以指定的字母开头css3
[属性名$=属性值][class$=str]匹配具有指定的属性,且属性值以指定的字母结尾css3
[属性名 |=属性值][class |=str]匹配具有指定的属性且属性值以指定的完整的单词开头(不能是字母)css3

  3.内容生成选择

    XHTML规定:页面内容交给标签来处理;页面表现交个css来处理。但css3有些“内容生成”选择器不单单可以呈现样式,还可以向页面中添加内容。

     (1)选择器1:before{

                                ......

                               content:存文本/图像/计数器;

                                  }

                              

        (2)  选择器1:after{

                                ......

                               content:存文本/图像/计数器;

                                  }

content属性必须配合:before/after选择器使用。

案例:

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	/*p:before{
		content:'子曰:';
	}*/
	p:after{
		content:'--摘自《论语》';
	}
	body{
		counter-reset:MyCount1 -1;
	}
	p:before{
		content:'<'counter(MyCount1)'>';
	}
	p{
		counter-increment:MyCount1 2;
	}
	
</style>
</head>

<body>
<p>鹅,鹅,鹅,</p>
<p>曲项向天歌;</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波。</p>
</body>
  (3)利用内容生成选择器还可以解决

        1)解决父元素的一个子元素的margin-top越界问题

               为父元素添加前置内容:

                      .parent:before{

                                                content:' ';

                                                display:table;   

                                                }

          2)解决所有的子元素浮动后父元素高度为0,且影响后续元素问题

               为父元素添加后置内容生成:

                     .parent:after{

                                          content: ' ';

                                           display:table;

                                            clear:both;

                                            }

案列2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent1 {
            width: 400px;
            height: 200px;
            background: #faa;
        }
        .parent2 {
            width: 400px;
            height: 200px;
            background: #afa;
            /*border-top: 1px solid #000;*/
            /*padding-top: 1px;*/
            /*overflow: hidden;*/
        }
        .parent2:before {
            content: ' ';
            display: table;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background: #aaf;
            margin-top: 20px;
        }
        p:before {
            content: '子曰:';
            color: red;
            margin-right: 5px;
            display: inline-block;
        }
        p:after {
            content: '——摘自论语';
            color: #aaa;
            font-style: italic;
        }
        hr {
            margin: 0;
        }
    </style>
</head>
<body>
    a<table></table>b
    <h1>第一个子元素的margin-top越界问题</h1>
    <div class="parent1"></div>
    <div class="parent2">
        <div class="child2"></div>
    </div>
    <hr>
    <p>三人行必有我师</p>
    <p>学而时习之不亦说乎</p>
    <p>有朋自远方来不亦乐乎</p>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>

案列3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            width: 600px;
            /*height: 400px;*/
            background: #faa;
        }
        .parent:after {
            content: ' ';
            display: table;
            clear: both;
        }
        .child1 {
            width: 200px;
            height: 150px;
            background: #afa;
            float: left;
        }
        .child2 {
            width: 200px;
            height: 150px;
            background: #aaf;
            float: left;
        }

    </style>
</head>
<body>
    <h1>子元素浮动对父元素、后续元素造成的影响</h1>
    <div class="parent">
        <div class="child1">1111</div>
        <div class="child2">2222</div>
    </div>
    <hr>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
   (二)css常用属性——重点
          (1)width/height          指定元素的宽高(block,img,table元素才可以)          单位:% px em                 (2)min-width/height   定义元素的最小宽高
          (3)max-width/height   定义元素的最大宽高
          (4)overflow                     规定当内容溢出元素框时发生的事情
                            *  visible:默认值,内容不被修剪。
                            *  hidden:内容会被修剪,并且其余内容不可见。
                            *  scroll:内容会被修剪,出现滚动条可以看其他内容。
                            *   auto :如果被修剪,出现滚动条。
                            *  inherit:规定应该从父元素继承overflow属性的值。
           (5)text-align               对齐方式
                            *  left:左对齐;
                            *  center:居中对齐;
                            *  right:右对齐;
           (6)line-height             行高(内联元素引用,竖直方向上留空白)
         (7)text-decoration         none(无任何线)  underline(下划线)  overline(文本上的一条线)   line-through(删除线)
           (8)border              边框    1px solid red;(宽度样式颜色顺序来写)
                             *  width:宽度;
                             *  style:样式;(solid,none,double,dotted,dashed,groove,ridge,inset,outset)
                             *  color :颜色;
           (9) outline             外轮廓(不占元素空间)
                             *  width:宽度;
                        *  style:样式;
                        *  color :颜色;
                        *  style:样式;
                        *  color :颜色;
           (10)border-radius                边框倒角、边框半径,绘制圆角边框              
                           *4个角可以单独定义,一起定义的话按顺时针顺序设置4个倒角(左上右上右下左下),取值为绝对值百分比 值越大,边角越圆。(必须还得指定边框才看得到效果) 
                         border-radius:  25% 20% 30% 10%;
           (11)box-shadow      向方框添加一个或多个阴影           取值为多个属性值的列表(不占空间
                        #d1{
                             border:6px solid #888;
                              box-shadow:15px 10px #666 inset;
                              //   15为水平阴影位置,正为右,负为左;10为垂直阴影位置,正为下负为上;阴影颜色,无 为黑色;有为内部阴影,无为(outset)外部阴影;    

                             }   

   (12)border-collapse:collapse;         合并边框

   (13)padding          内容与边框之间的距离          可以为像素、百分比、但不能为负数

                    *  left

                    *  right

                    *  top

                    *  bottom

                  padding:10px 20px 30px 40px; (上右下左顺序定义)

   (14)margin             外边距             (语法与padding一致) 

       补充padding,margin知识(重点、难点)

  css盒子模型:

   1)   box-sizing           盒子模型的计算方法

              *  context-box (默认值) 一个盒子的宽度等于margin+border+padding+width

             *  border-box   (推荐使用) 一个盒子的宽度等于margin+width  便于排版计算可以省去很多麻烦 

   2)两个相邻元素若都指定了间距,那么间距会进行合并,合并后的值时二者指定的间距中的较大值(浮动会产生影响,间距不能合并

   3)区块元素若想在父元素中水平居中,margin:0 auto; 有浏览器自动计算左右间距--平均分

   4)

 marginxmarginypaddingxpaddingy
BLOCK不浮动占用空间占空间、会合并占用空间占用空间
BLOCK浮动占用空间、不合并占空间、不合并占空间占空间
INLINE占空间、不合并无效占空间有效、不占空间(重叠)

(15) background-color     设置元素背景色(内容+填充+边框 ,不会占据外边距)

(16)background-image     背景图片    url(xx.png)

        (17)background-repeat     

                   *  no-repeat      不重复

                   *  repeat-x         只水品平铺

                   *  repeat-y         只垂直平铺

        (18)background-position      控制图片位置

                   *   left      *center   *right   还可以设置像素来控制(20px  30px)

        (19)background-attachment    背景滚动方式

                   scroll:背景随内容滚动

                   fixed:背景固定不动

        (20)background-image      凡是使用背景图片的地方都可以使用渐变作背景

                   linear-gradient  线性

                   redial-gradient  径向

                   repeating-radial-gradient  重复镜像

                   repeating-linear-gradient      重复线性

              eg:#d1{

                  background-image:Linear_gradient(to bottom,red,#fff); 

                  }

                 #d2{

                  background-image:Linear_gradient(90deg,red 0,#ccc 30%); 

                  }

:小生总结知识比较片面,比如想更详细的了解css属性还是以css官方为主,后续还会在对css定位、css3中的变形/转换,动画,媒体查询相关的知识在详细总结。



                          

阅读更多
个人分类: 前端
想对作者说点什么? 我来说一句

CSS终极讲解自学PPT

2008年11月19日 732KB 下载

没有更多推荐了,返回首页

不良信息举报

css样式——Cascade Style Sheet 级联样式单

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭