第2天-css快速入门

css是什么

　　css（cascading style sheet,可以译为“层叠样式表”），是一组格式设置规则，用于控制web页面的外观

如何让一个标签具有样式

　　第一步：必须保证引入方式正确

　　第二步：必须让css和html元素产生关联，也就是说要先找到这个元素

　　第三步：用相应的css属性去修改html元素样式

css的三种引入形式

　　1、将css内嵌到HTML文件中，这种方式又叫内联样式表，例如

<head>

    ...

    <style type="text/css">

        #box{

            width: 100px;

            height: 100px;

            background: red;

        }

    </style>

</head>

内联样式表

　　2、将一个外部样式链接到HTML文件中，这种方式又叫链接样式表，例如：

<head>

    ...

    <link rel="stylesheet" href="css/index.css" />

</head>

链接外部样式

　　3、将样式表加入到HTML文件中，这种方式又叫做行内样式表

<body>

    <div style="width: 200px;height: 200px;background: green;"></div>

</body>

行内样式

选择器

div {

    属性：属性值；

}

标签选择器

#box {

    属性：属性值；

}

<div id='box'></div>

id选择器

.box {

    属性：属性值；

}

<div class='box'></div>

类选择器

相邻选择器可以选择紧跟其后的相邻元素，相邻选择器用+号来连接

h1+div {

    width: 100px;

    height: 100px

    background-color: blue;

}

<h1>css样式测试</h1>

<div id='div1'></div>

<div id='box'></div>

相邻选择器

当几个元素有共同属性的时候，可以使用多元素选择器，用逗号隔开

h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,textarea,form,input,select,body {

    margin:0;

    padding: 0;

}

多元素选择器

后代选择器作用于父元素下面的所有子元素

#div1 p{

    /*把id为div1的下面的所有p元素的字体设置为红色，这里包括id为box的子元素p*/

    color: red;

}

<h1>css样式测试</h1>

<div id="div1">

    <p>一江春水向东流</p>

    <p>飞流直下三千尺</p>

    <div id="box">

        <p>床前明月光</p>

    </div>

</div>

后代选择器

子元素选择器作用于父元素的子元素，

元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，

而子元素选择器只能作用于它的子元素

#div1>p{

    /*把id为div1的下面的子p元素的字体设置为红色，这里只包含子元素，不包含id为box下面的子元素*/

    color: red;

}

<h1>css样式测试</h1>

<div id="div1">

    <p>一江春水向东流</p>

    <p>飞流直下三千尺</p>

    <div id="box">

        <p>床前明月光</p>

    </div>

</div>

子元素选择器

E[attr]匹配所有具有att属性的E元素，不考虑属性的值，例如：input[name],只要有name属性的input元素都会被选中

input[name]{

    /*把带有name属性的input元素加上红色边框*/

    border: 1px solid red;

}

<form>

    <input type="text" name='ipt1' />

    <input type="text" name='ipt2' />

    <input type="submit" value="提交" />

</form>

E[attr=val]匹配所有attr属性值等于val的E元素，例如:input[name=ipt2]，属性值一般不加引号

input[name]{

    /*把带有属性name=ipt1的input元素加上红色边框*/

    border: 1px solid red;

}

<form>

    <input type="text" name='ipt1' />

    <input type="text" name='ipt2' />

    <input type="submit" value="提交" />

</form>

E[attr ~=val]， ‘~’包含的意思，只要属性值包含了val的E元素都会被选中

[title~=flower]{

    border: 5px solid yellow;

}

<p>title属性中包含单词"flower"的图片会获得黄色边框</p>

<img src="/i/eg_tulip.jpg" title="tulip flower">

<br />

<img src="/i/shanghai_lupu_bridge.jpg" title="lupu bridge">

E[attr =val]，""以某个值开头的意思，只要属性值以val开头的E元素都会被选中

div[class^="test"]{

    background-color: red;

}

<div class="first_test">第一个div元素</div>

<div class="second">第二个div元素</div>

<div class="test_three">第三个ddiv元素</div>

E[attr ￥=val]，"$"以某个值结尾的意思，只要属性值以val结尾的E元素都会被选中

div[class￥="test"]{

    background-color: red;

}

<div class="first_test">第一个div元素</div>

<div class="second">第二个div元素</div>

<div class="test_three">第三个ddiv元素</div>

属性选择器

a标签的4种状态

link(未访问链接)
hover(鼠标放上状态)
visited(已访问链接)
active(当前活动链接)

a:link{

    color: red;

}

a:visited{

    color: blue;

}

a:hover{

    color: yellow;

}

a:active{

    color: green;

}

<a href="http://nativejs.org">原生js</a>

伪类元素

a:before{

    content: "点我";

}

a:after{

    content: "!!!";

}

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

<p>百度一下你就知道了</p>

<a href="http://nativejs.org">原生js社区</a>

一个使用场景：解决浮动带来的问题

基本属性

/*背景颜色 background-color*/

div{

    height: 200px;

    width: 200px;

    background-color: #ccc;

}

/*背景图片 background-image*/

div{

    height: 200px;

    width: 200px;

    background-image: url(img/bg.png);

}

/*背景重复 background-repeat*/

div{

    height: 200px;

    width: 200px;

    background-image: url(img/bg.png);

    background-repeat: repeat-x;

    /*

       不添加此属性，则纵向横向都重复

       repeat-x 横向重复

       repeat-y 纵向重复

       no-repeat 不重复

    */

}

/*背景位置 background-position*/

background-position: x y;

/*xy分别表示x轴位置和y轴位置*/

/*

横向（left,center,right）

纵向 (top, center,bottom)

*/

背景属性background

/*border-width 边框的宽度*/

div{

    border-style: solid;

    border-width: 15px;  /*边框宽度为15个像素*/

    height: 200px;

    width: 200px;

}

/*border-style 边框样式*/

div{

    border-style: dashed;

    border-width: 5px;

    height: 200px;

    width: 200px;

    /*

     边框风格样式的属性值

     none 无边框

     solid  直线边框

     dashed 虚线边框

     dotted 点状边框

     double 双线边框

    */

}

/*border-color 边框颜色*/

div{

    border-style: dashed;

    border-width: 5px;

    border-color: red;  /*边框颜色为红色*/

    height: 200px;

    width: 200px;

}

/*单独设置某边框 border-left|top|right|bottom*/

div{

    height: 200px;

    width: 200px;

    border-left: 1px solid red;  /*设置左边框样式*/

}

/*border-radius 向元素添加圆角边框*/

//为所有角设置圆角

div{

    height: 200px;

    width: 200px;

    border: 2px solid green;

    border-radius: 20px;   /*所有角设置圆角的幅度为20px*/

}

//后面给两个值

div{

    height: 200px;

    width: 200px;

    border: 2px solid green;

    border-radius: 10px 30px;   /*上左下右10px, 上右下左30px*/

}

//后面给三个值

div{

    height: 200px;

    width: 200px;

    border: 2px solid green;

    border-radius: 10px 0 30px;   /*上左10px, 上右下左0， 下右30px*/

}

//后面给四个值

div{

    height: 200px;

    width: 200px;

    border: 2px solid green;

    border-radius: 10px 20px 30px 40px;   /*上左,上右,下右,下左*/

}

//设置半圆

//把高度设置成宽度的一般，并且只设置下左和下右两个叫的值，设置的值为宽度的一般

div{

    height: 100px;

    width: 200px;

    border: 2px solid green;

    border-radius: 0px 0px 100px 100px;   /*上左,上右,下右,下左*/

}

//设置圆形

//把高度和宽度设置成一样，并把4个圆都设置成宽高一般

div{

    height: 200px;

    width: 200px;

    border: 2px solid green;

    border-radius: 50%;

}

边框属性border

/*RGB模式: 红(R)、，绿(G)、蓝(B)每个的取值范围0-255*/

p{

    color: rgb(0,255,0);

}

/*RGBA模式: A表示色彩的透明度，取值范围是0-1*/

p{

    background-color: rgba(200,255,255,0.5);

}

/*16进制*/

p{

    background-color: #ccc;

}

/*颜色名称*/

p{

    color: red;

}

颜色属性

/*字体类型 font-family: 可以写多个字体，用“，”隔开，以确保当字体不存在的时候直接用下一个 */

p{

    font-familt: 宋体, serif;

}

/*字体大小 font-size*/

p{

    font-size: 14px;

}

/*字体加粗 font-weight: 默认是normal, bold(粗)、bloder(更粗)、lighter(更细)*/

p{

    font-weight: bold;

}

字体属性font

/*横行排列 text-align , center居中，left靠左，right靠右 */

p{

    text-align: center;

}

/*文本行高 line-height*/

p{

    text-align: center;

    height: 50px;

    line-height: 50px ; /*文本行高和盒子高度一致就会垂直居中*/

}

/*首行缩进 text-indent*/

p{

    text-indent: 50px;

}

/*字符间距*/

p{

    letter-spacing: 10px;

}

文本属性

<html>

<head>

<style type="text/css">

img.top {vertical-align:text-top}

img.bottom {vertical-align:text-bottom}

</style>

</head>

<body>

<p>

这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。

</p> 

<p>

这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。

</p>

</body>

</html>

垂直对齐

巴特西