客服热线:

WEB前端教程:05css基本样式和c3选择器

2019-04-21 21:41:49浏览:4 评论:0 来源:招生宝   
核心摘要:一、背景1.background-color 背景颜色默认值是transparent(透明的)当同时定义了背景图像和颜色时,背景图像将覆盖在背景颜色之上

一、背景

1.background-color  背景颜色

默认值是transparent(透明的)

当同时定义了背景图像和颜色时,背景图像将覆盖在背景颜色之上

.divclass{ background-color:#808080;}

颜色的取值:

1.关键字:red、blue等

2.16进制:#000000、#cccccc、#ff0000等

3.rgb(0,0,0)

4.rgba(0,0,0,.5)

2.background-image  背景图片

默认值是none(没有图片)

元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距

通过url使用绝对或相对地址指定图片

background-image: url("images/img.jpg");

1.绝对路径:文件在网络或本地的绝对地址,从盘符开始  C:\Users\Administrator\Desktop\a.jpg

2.相对路径:相对于你当前目录,同一等级直接写图片名称即可,在下一级,用\查找,在上一级,用../查找。一般不使用绝对地址。


7.background

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color

background-position

background-size

background-repeat

background-attachment

background-image

如果不设置其中的某个值,也不会出问题,取默认值,比如 background:url('smiley.gif') no-repeat; 也是允许的。


二、字体属性

1.color  规定文本的颜色

  如:

  div{ color:red;}

  div{ color:#ff0000;}

  div{ color:rgb(255,0,0);}

  div{ color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式(正常、斜体)

默认值 normal

属性值

normal  正常字体

italic  斜体字

p{ font-style:italic; }

3.font-size 指定文本字体大小

通过像素来指定字体大小  1px = 1像素

p{ font-size:12px; }

4.font-family 定义文本使用某个字体

默认值 由浏览器确定

示例

font-family:microsoft YaHei;

font-family:"Microsoft YaHei","Simsun","SimHei";

6.letter-spacing:;设置字的间距

如:div{letter-spacing:2px;}

7.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条

8.让溢出的文字以省略号显示

p{ height: 20px; width:100px; background:#ddd;

white-space: nowrap;    //让文字在同一行显示,不换行

overflow: hidden;       //溢出部分隐藏

text-overflow: ellipsis; //文字溢出部分省略号显示,另外一个值为clip

}

 <p>这段文字多余的部分会显示为省略号</p>


三、文本属性

1.text-align 内容对齐方式,它是针对于元素的内容

属性值  left |center |right 

p{text-align: center;} 

p是块元素,left、right和center会作用于整个行


2.text-decoration 指定文字有无装饰,默认值为none

属性值:

 underline  指定文字的装饰是下划线

overline  指定文字的装饰是上划线

line-through 指定文字的装饰是贯穿线,类似于删除标签的效果


3.text-transform 设置对象中的文本的大小写

默认值none  无转换

属性值

capitalize  将每个单词的第一个字母转换成大写

p{ text-transform: capitalize; }

<p>this is paragraph</p>

uppercase  全部转换成大写

p{ text-transform: uppercase; }

lowercase  转换成小写

p{ text-transform: lowercase; }

<p>THIS IS PARAGRAPH</p>


4.text-indent文本缩进 

文本缩进属性是用来指定文本的第一行的缩进。

如:p {text-indent:2em;}

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。


5.word-wrap  设置当前行超过指定容器的边界时是否换行

首先我们要知道一种情况:如果你容器中的单词过长,超出了容器本身的宽度,会造成“长单词溢出”

word-wrap: break-word;可设置过长的文本自动换行


5.vertical-align  设置对象内容的垂直对其方式。

是容器中元素相对于内容的显示

示例

 div{ background:orange; height: 100px;}

 a {display:inline-block; height:100px; width:80px; background:red; vertical-align: middle;}

 <div>这里有内容<a href="#"></a></div>    

 *div中定义a,vertical定义的是a相对于div内容的对齐方式,它和容器的高度无关,与文字内容有关

示例2

p{ background:orange; }

img{ width:100px; vertical-align: middle; }

<p>this is paragraph!!!<img src=https://www.school360.cn/skin/m03skinBlue/image/nopic.gif alt=""/></p>

8.opacity  设置颜色的透明度,整个元素都会透明

默认值1,取值为0-1

1为不透明,0为完全透明

示例

  p{ opacity: 0;}  隐藏一个元素 ,完全不显示,但是会占空间,只是看不到。

  p{ opacity: 1;}  显示一个元素

它和rgba中的”a”作用一样


四、列表属性

1.list-style-image  设置列表项标记的图像(项目符号)

  只有一个属性url,引导一个图片

  ul{ list-style-image: url("images/icon.png");}

示例

用list-style-image重置项目符号示例

.test{list-style-image:url(skin/ico.png);} 

 //整体重置作用于ul,单个设置用于li上

<ul>

<li>列表项一</li>

<li>列表项一</li>

<li>列表项一</li>

<li>列表项一</li>

</ul>


2.list-style-position 设置列表项标记如何根据文本排列

这个属性有两个值outside和inside

outside项目符号放在文本以外(默认)

ul li{ list-style-position:outside;  width:100px;   border:1px solid red;}

inside项目符号放在文本以内

ul li{ list-style-position:inside;  width:100px;   border:1px solid red;}

3.list-style-type 设置列表项所使用的预设标记

可选值

none不使用项目符号

disc实心圆(相当于html属性type=”disc”)

circle空心圆

square实心方块

示例

ul{ list-style-type:circle;}

4.list-style

复合属性

写法

list-style:list-style-image  list-style-position   list-style-type

把之前几个属性值 写在一个list-style中

示例

ul{ list-style: url("images/icon.png") outside disc;}

前面设置了图片,最后再设置项目符号的目的是,如果图片未能正常显示,可以有符号来代替


css3选择器

首先CSS选择器分这么几大类:

1.基础选择器

2.关系选择器

3.属性选择器

4.伪类选择器

5.伪对象选择器


一、关系选择器

1.后代选择器 (E F)

选择所有被E元素包含的F元素,中间用空格隔开

ul li{ color:red; }

<ul>

<li>苹果</li>

<li>橙子</li>

 <li>西瓜</li>

</ul>


2.子代选择器 (E > F)

 选择所有作为E元素的直接子元素F,对孙子元素不起作用,用大于号表示

div>a{ color:red;}   //div下的一级子元素a

<div>

<a href="#">这是子元素</a>

<p><a href="#">这是孙子元素</a></p>

</div>


3.相邻兄弟选择器 (E+F)

选择紧贴在E元素之后F元素,用加号表示,选择相邻的第一个兄弟元素。

p+span{ color:red;}   //只会选中第一个span

<p>这是p元素</p>

<span>这是紧挨着p元素的第一个span</span>

<span>这是第二个span</span>


4.通用兄弟选择器 (E~F)

选择E元素之后的所有兄弟元素F,作用于多个元素,用~号隔开。

p~span{ color:red;}   

//和p之后平级的span元素都被选中了,有几个选中几个

<span>这span在p元素之前不会被选中</span>   

<p>这是p元素</p>

<span>这是紧挨着p元素的第一个span</span>

<span>这是第二个span</span>

<span>这是第三个span,它和p是兄弟关系</span>


二、CSS属性选择器:

通过html的属性来选择元素,<p class=”p1”></p>  class即是属性,p1是class的属性值。 

写法:元素[ 属性名= “属性值”] ,等号不固定,可换其它符号

1.E[att]

2.E[att="val"]

3.E[att~="val"]

4.E[att^=“val"]    以val开头

5.E[att$=“val"]    以val结尾

6.E[att*=“val"]    包含val

7.E[att|="val"]


1.E[att]  选择具有attr属性的E元素

p[class]{ color:red;}    //选择带有class属性的p标签

<p>这是p1标签</p>

<p>这是p2标签</p>

<p>这是p3标签</p>

<p>这是p4标签</p>

 *不管class名为什么,只要有class属性,即符合


2.E[att="val"]  选择具有att属性且属性值等于val的E元素。

它不仅要有符合的属性,值也要符合才会被选中。

 p[class="p4"]{ color:red;}    //选择p元素里class等于p4的元素,属性值要用引号引起来

<p>这是p1标签</p>

<p>这是p2标签</p>

<p>这是p3标签</p>

<p>这是p4标签</p>


3.E[att~="val"]  选择有att属性的元素,且属性值列表中有一个符合val的元素

比如我们的class属性,它的值通常是多个样式,中间以空格隔开,只要有一个值符合就被选中

p[class~="p1"]{ color:red;}    //选中p元素下class值包含p1的元素

<p class="p1 paragraph p11">这是个段落</p>

<p class="p1paragraph p11">这是个段落</p>   //不会被选中,p1paragraph被看作一个整体

<p class="p1">这是个段落</p>

<p class="paragraph p1 p11">这是个段落</p>   //与位置无关,这行也会被选中

<p>这是个段落</p>


4.E[att^=“val"] 选择E元素中有att属性,且以”val”开头的元素

p[class^="p"]{ color:red;}  //选择带有class属性,属性值以p开头的元素

<p class="p1 paragraph p11">这是个段落</p>

<p class="p1paragraph p11">这是个段落</p>

<p>这是个段落</p>

<p class="paragraph p11">这是个段落</p>

<p>这是个段落</p>

*以上全部是以class值以p开头的,所以全部选中


5.E[att$=“val"]  选择具有att属性且属性值为以val结尾的字符串的E元素

p[class$="p"]{ color:red;}     //选择p元素中class属性值以p结尾的元素

<p class="p1 paragraph p11p">这是个段落</p> 

<p class="p1paragraph p11">这是个段落</p>

<p>这是个段落</p>

<p class="paragraph p1 p11">这是个段落</p>

<p class="p11p">这是个段落</p>


6.E[att*=“val"] 选择具有att属性且属性值包含val的字符串的E元素。  

a[href*="baidu"]{font-weight: bold;}   //选择a标签中href属性值包含baidu的元素

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

<a href="#">空的超链接</a>

<a href="http://www.youdao.com">有道</a>


7.E[att|="val"]  选择具有att属性,并且属性值用“链接符隔开”,以val开头的元素(val指链接符前完整的前缀)

  项目中我们命名class名时,经常会以这种方式”sxt-work”,中间以一个中划线隔开。这时候使用此属性再合适不过。

  div[class|="sxt"]{ color:red;}   //div里class类名中有链接符,并且以sxt开头的元素

<div class="sxt-work">这是块元素work</div>

<div>这是块元素car</div>   //不是以sxt开头

<div class="sxt-pen">这是块元素pen</div>

<div>这是块元素pen</div>   //没有链接符


三、伪类选择器

伪类通过冒号来定义,它定义了元素的状态,如点击按下、点击完等等,我们之前都是直接操作元素的样式,现在可以为元素的状态改样式,使元素看上去更“动态”。

1.E:link

2.E:visited

3.E:hover

4.E:active

5.E:not()

6.E:first-child

7.E:last-child

8.E:only-child

9.E:empty

10.E:checked

11.E:focus


1.E:link

设置超链接a在未被访问前的样式(特指a标签)

 a:link{ color:red;}   //未访问时a的颜色,设置别的元素没有效果

2.E:visited

设置超链接a在其链接地址已被访问过时的样式(特指a标签)

 a:visited{ color:green;}  //点击过后的超链接样式

*测试时,在url后面加参数使页面达到未访问过的状态

3.E:hover

设置鼠标悬停在元素上时的样式。不限于a标签,p、li也可以使用

a:hover{ color:red;}

p:hover{ color:red;}

<a href="#">这是个超级链接</a>

<p>这是个段落</p>

4.E:active   

设置元素在鼠标按下时的样式(不限于a标签)

 a:active{ color:red;}

p:active{color:yellow;}

div:active{ color:blue;}

<a href="#">百度</a>

<p>这是段落</p>

<div>这是div</div>

5.E:not(s选择器)  匹配不含有s选择器的元素E。

div:not(.d1){ color: red;}

 //选择除了类名为d1的元素,注意,not()中的值不加引号!

<div>块元素</div>

<div>块元素</div>

<div>块元素</div>

<div class="d2 d1">块元素</div>

<div id="div2">块元素</div>

6.E:first-child 父元素的第一个子元素E。

要使该属性生效,E元素必须是某个元素的子元素。一般元素都是body的子元素,所以都可以使用此伪类。而body标签不是子元素,所以 body:first-child

{ background:#ddd;} 是无效的。

    <ul>

        <h2>标题</h2>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

    </ul>

    <ul>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

    </ul>

注意观察两个样式的区别

li:first-child{ color:red;}

ul:first-child{ color:red;}

这个属性的意思是被选元素本身是子元素,并且是它父元素中的第一个


7.E:last-child 父元素的最后一个子元素E

    <ul>

        <h2>标题</h2>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>                     

    </ul>

    <ul>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>

        <li>元素</li>      不会变红,因为它不是最后一个

        <h3>底部第一个</h3>                 

     </ul>


8.E:only-child   E元素是唯一的子元素时被匹配

<body>

    <p>段落</p>   

</body>

此时body中只有这一个元素,所以 p:only-child{ color: deepskyblue;}  会生效

<body>

    <p>段落</p> 

    <p>段落</p>

</body>

这时body的子元素不是唯一的了,所以 p:only-child{ color: deepskyblue;} 不会生效

9.E:empty    匹配没有任何子元素(并且不包括text节点)的元素E

     p:empty{ border:1px solid red;padding:10px;}


    <p></p>    

    <div></div>   //空,但不是P元素

    <p>我是一个p元素</p>   //有text文本节点

    <p><a href="#">百度</a></p>   //有子元素

10.E:checked  

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

input:checked+span{color:red;}  

<input type="radio" name="sex"/><span>男生</span>

<input type="radio" name="sex" checked="checked"/><span>女生</span>

*input下被选中的元素紧挨着的span颜色为红色,因为选中状态会变,所以看着像动态的

11.E:nth-child()   选中第几个子元素

<div>

    <p>1</p>

    <p>2</p>

    <p>3</p>

</div>


.box p:nth-child(2){

           color: red;

       }

//选中第二个p元素

 .box p:nth-child(even){

           color: red;

       }

//选中第偶数个子元素

 .box p:nth-child(odd){

           color: red;

       }

//选中第奇数个子元素

四、伪对象选择器

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该    :weilei    ::weiyuansu,而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的。

伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性;

伪元素表示DOM外部的某种文档结构

伪类更多是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)

常用伪元素

1.E:before/E::before

2.E:after/E::after


1.E:before/E::before

  before 选择器在被选元素的”内容”前面插入内容。用来和content属性一起使用

  虽然E:before可转化为E::before,但是你写伪元素时要规范,用两个冒号  p::before{ content:"在P标签元素内容前加了内容"; color: red;}

      //它并没有在html文件结构中

  <p></p>

2.E:after/E::after

  after选择器在被选元素的”内容”后面插入内容

  p::after{ content:"在P标签元素内容前加了内容"; color: red;}

  <p></p>

*content属性与 :before 及 :after 伪元素配合使用,来插入生成内容。


CSS Hack

由于不同厂商的浏览器,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不一样,因此会导致生成的页面效果不同,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

css hack并不是什么技术,只是针对于在不同浏览器上的bug的解决方案。一般都是利用各浏览器的支持CSS的能力和BUG来进行的。

hack这个词,看翻译也知道它属于是一种“暴力”的作法,尽量找到通用方法而减少对CSS Hack的使用,大规模使用CSS Hack会带来维护成本的提高以及浏览器版本变化而带来类似Hack失效等系列问题。(对当前浏览器版本起作用的hack,也许升级一下,界面就又乱了)

下面我们学习常用的几个hack,主要仅针对IE浏览器,IE6以下不再考虑。


1.条件hack

实例1

<!--[if IE 9]>

<style>

  body{ background-color:orange; }  //在IE9下,背景颜色为橘色

</style>

<![endif]-->

示例2

<!--[if IE]>

     <p>如果你使用IE浏览器将能看到我</p>   //在IE浏览器显示段落p

<![endif]-->


示例3

<!--[if gt IE 6]>

<style>

.test{color:red;}

</style>

<![endif]-->

//大于ie6版本的.test类字体为红色

通过上面三个例子我们可以发现:

条件注释它的格式为

  <!--[ if 条件 ]>

  代码块

  <![ endif ]-->


大于  gt

大于或等于  gte

小于  lt

小于或等于 lte

非指定版本  !

这些条件帮我们更精确的筛选浏览器版本


(责任编辑:小编)
下一篇:

WEB前端教程:雪碧图和滑动门

上一篇:

WEB前端教程:04HTML5新增元素和css选择器

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们
 
0相关评论