CSS教程

作者: Francis__ | 来源:发表于2017-10-25 17:33 被阅读29次

CSS代码--写在哪里？
- 外部样式：
- <link rel="stylesheet" type="text/css" href="css文件名" />
- 内页样式：
- <style type="text/css">此处写CSS代码</style>
- 行内样式：
- <p style="color:red">将字体改为红色</p>

CSS基本语法

CSS规则由两个主要的部分构成：
- 选择器：要给元素装潢加样式(首先得选中需要装潢的元素)
- 一条或多条声明：声明--由一个属性和一个值组成
  - 属性是您希望设置的样式属性。每个属性有一个值
  - 属性值被冒号分开，如果要定义不止一个生命，则需要用分号将两个声明分开，养成良好的习惯。就算一个小声明我们也加上分号
  - eg:

p{
    color:red;  /*将(字体)颜色设置为红色*/
    font-size:30px;    /*将字体大小设置为30px*/
}

CSS注释用/**/

CSS选择器

简单选择器

1.++id选择器++

- 通过给标签加id属性，并给给属性一个值(我们称为id名称)

#id名称{
    font-size:20px;
    
}
<div id="id名称">随便写点什么东西</div>

id属性的值是我们自己定义的，定义值的过程我们可以称作给id命名！命名需要遵循一定规则

.
- 只采用字符(a-z,A-Z,0-9),连字号(-)和下划线(_)，区分大小写
- 以字母开头，避免纯数字，避免数字开头，以保证兼容(以数字开头的类名，id名仅在 IE6/IE7/IE8 下被识别，其他浏览器下则不识别)
- 一个id名只能在一个页面中出现一次

2.++类(class)选择器++

给标签加class属性并给该属性一个值(该值我们可以称为类名)
eg:

.类名{
    /*看清楚类名前面得有个点啊！*/
    color:red;
    font-size:40px;
}
<p class="类名">不知道该写点啥</p>
<div class="类名">还不知道该写啥</div>

class属性的值是我们自己定义的，定义值的过程我们可以称作给类(class)命名！
- 只采用字符(a-z,A-Z,0-9),连字号(-)和下划线(_)，区分大小写
- 以字母开头，避免纯数字，避免数字开头，以保证兼容(以数字开头的类名，id名仅在 IE6/IE7/IE8 下被识别，其他浏览器下则不识别)
- 类名的好处是可以多次使用，方便你给标签归类
- 一个标签可以拥有多个类名

<p class="red size40">段落</p>
/*将段落 二字改为红色，40px*/

3.++标签选择器++

打击面过广，慎用

div{
    color:red;
}
p{
    font-size:30px;
}
<body>
    <div>此处为红色字</div>
    <p>此处为30像素的字</p>
</body>

复杂选择器

4.++交集选择器:++

- 一个标签选择器后跟一个类选择器或者一个id选择器，中间不能有空格。他要求必须是属于某一个标签的，并且生命了类选择器或者id选择器
- eg:
  - 类选择器：div.mycolor{...} /类别为mycolor的层才会被选中/
  - id选择器：div#mydiv{...} /id为mydiv的层才会被选中/

p.mycolor{
    font-size:40px;
    color:green;
}
div#mydiv{
    font-size:4px;
    color:blue;
}
<body>
    <p class="mycolor">40像素绿色</p>
    <div class="mycolor">无变化</div>
    <div id="mydiv">4像素蓝色</div>
    <p id="mydiv">无变化</p>
</body>

4.++并集选择器++

- 就是多个选择器以逗号相连，只要满足其中之一它就会被选中
- eg:

p,mycolor,li.happy,div#mydiv{
    color:pink;
    font-size:90px;
}
<body>
    <div>这个没被选中</div>
    <ul>
        <li class="happy">这个被选择</li>
        <li>这个没被选择</li>
    </ul>
    <div id="mycolor">这个被选中</div>
    <div class="mycolor">这个被选中</div>
    <p id="mydiv">这个没被选中</p>
    <div id="mydiv">这个被选中</div>
</body>

后代选择器(包含选择器)
- 以空格相连的多个选择器，外层的选择器写在内层选择器前面
- 根据元素的后代关系作为选择器的筛选条件
- eg:div h1.frist span.fristletter{...}

div p span{
    color:red;
    /*删除中间的p亦可*/
}
<body>
<div>
    <p>
        我是div里面的p
        <span>
            我是div的后代(只有这条变红)
        </span>
    </p>
    <p>我是div里面的p</p>
</div>
</body>

继承：

body{
    color:red;
}
<body>
    <div>....</div>
    <p>....</p>
    <div>
        ....
        <span>....</span>
    </div>
</body>

使鼠标指上去后出现不同效果————伪类选择器（hover）

伪类选择器（http://www.cnblogs.com/zcynine/p/5008985.html）
伪类选择器文字，颜色：http://blog.csdn.net/u013184759/article/details/50507168
理论上来讲伪类选择器可作用于其选中的块中的大多数元素（图片文字等，其余待检验）

a:hover{
    color:red;
}
div:hover{
    font-size:80px;
}
<body>
    <a herf="http://www.baidu.com">百度一下你就知道</a>
    <div>百度一下你就知道</div>
</body>
/*鼠标指上去后出现不同效果(字体颜色、大小变化之类的)*/

通配符选择器
- 一种特殊的选择器，用符号'*'表示，可以定义文档中*****所有*****元素对象的样式

*{
    ......
}

构造文本

CSS长度值的单位

- pt:point，大约1/72寸
- pc:pica,大约1/6寸
- px：屏幕的一个像素点
- em：元素的font-size
文本缩进：
- text-indent:值;
- 值为数字，最常用的数值单位是px,也可以用百分比
  - text-indent:100px;
  - text-indent:100%;

p{
    text-indent:10%;
}

文本对齐
- text-align:对齐方式;
- 可选的值为：left,center,right
- 填满一行自动往第二行补，补的位置视值而定(left,center,right)

p{
    text-align:right;
}

文本行高
- line-height:值;
- 默认：normal
字间隔(单词)
- word-spacing:值;
- 默认值：normal
字母间隔(对汉字亦有用)
- letter-spacing:值;
- 默认值：normal
文字下划线
- text-decoration:none;
- 值：underline或者none等
字体
- font-family:微软雅黑;

p{
    font-family:字体1,字体2;
}
/*以逗号间隔多种字体，若未找到前者则自动向后跳转，直至找到相应字体为止*/

字体风格
- fontstyle:值;
- 值：normal,italic(斜体),oblique(斜体。我也不知道有啥区别)
字体大小
- font-size:数值;
- 数值单位为px
文本颜色
- color:颜色值;
- 颜色值可以为一些简单的英文单词
- 实际工作中用的比较多的是颜色代码.color:#111111;(自己取百度搜颜色代码)
- 若想找寻颜色可以用到Ps，里边的滴管工具，右击有一个生成html颜色码
文本加粗
- font-weight:值;
- 常用值：normal，bold(加粗)

用CSS给网页装潢[4]--构造块级元素

1.块级元素

宽高
- width:数值；
- height:数值;
- 亦可用百分比
- 宽高的设置不会被后代继承
背景
- 背景颜色
  - background-color:颜色值;
  - 背景色默认为transparent(透明。如此就解释了为何可以看到父元素的背景色)
  - 自己百度颜色代码
- 背景图片
  - 使用background-image属性默认值为none表示背景上未放置任何图像。若需要设置一个背景图像，必须为这个属性设置一个url值
    - background-image:url(1.gif);
      - 在css文件中引入图片时其位置应当相对于css文件来看
  - 注意图片的引入方法！
  - 背景图片重复的问题
    - ++background-repeat++。可选值：repeat-x.repeat-y,no-repeat

/*在此全部默认为在css文件中，暂且不管html中的代码*/
#div{
    background-repeat:repeat-y;     /*竖直平铺*/
    background-repeat:repeat-x;     /*水平平铺*/
    background-repeat:no-repeat;    /*不要背景平铺*/
}

- 背景图片的问题：++background-position++
  - 可以使用一些关键字：top,bottom,left,right和center（通常这些关键字会成对出现）
  - background-position:top(y轴-竖直方向) center(x轴-水平方向);
  - background-positoin:30%(x轴-水平方向) 3%(y轴-竖直方向);
  - background-position:50px(x轴-水平方向) 30px(y轴-竖直方向);
  - 亦可混合使用：background-position:50px bottom;
- 背景关联：++background-attachment:fixed++
  - 背景图片固定，不再随着滚动条的滚动而移动
    - 简写:background:#00ff00 url(1.gif) no-repeat fixed center left;
    - 即---background:颜色值图片地址图片是否平铺水平偏移值竖直偏移值
    - 不需要的设置选项可以不写
  - 边框：border:1px(边框宽度) solid(实线) #ccc(颜色);
    - dashed表示虚线
      - border-left:none;（左无边框）
      - border-right:10px solid red;（右边框为....）
      - border-top:none;（顶无边框）
      - border-bottom:none;（底无边框）

后代元素长度大于祖辈元素大小时的处理方法：

overflow:;
可能的值：
- visible:默认，内容不会被修剪，会呈现在元素框之外
- hidden:超出的内容会被修剪，直接不现实
- scroll:超出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（这个极丑，慎用）
- auto:若内容被超出，则浏览器会显示滚动条以便查看其余的内容
  - auto若不超范围则无滚动条，哪里（横/纵）超范围哪里有
  - scroll则不论是否超出范围都有滚动条
  - 反正这俩这么丑了解一下就好啦
- inherit:规定应该从父元素继承overflow属性的值

#div1{
    width:200px;
    height:200px;
    background:#CCFF66;
    border:1px solid #000000;
    overflow:hidden;
}
#div2{
    width:300px;    /*注意，此处子元素宽度已经超过父元素*/
    height:150px;
    background:#FF00FF;
}
<body>
    <div id="div1">
        <div id="div2">Hello World!</div>
    </div>
</body>

盒模型概念

盒模型规定了元素框处理元素内容，内边距，边框和，外边距的方式。页面中的所有标记都可以看成是一个盒子，盒模型是我们对网页元素进行定位的基础，而定位是我们队网页元素进行位置固定的重点知识
元素性质相互转化（此处应用的例子是内联元素转化为块级元素）：
- display:block;
- display:inline;（设置成内联元素）
- display:inlilne-block;（可以令块级元素在一排（而非以前的一个块级元素独占一排））
- display:none;（任何一个元素被设置为这个就会消失于页面中）

a{
    width:200px;
    height:200px;
    border:1px solid #000000;
    display:block;
}
<body>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>

- 内边距：边框与内容区之间的距离，通过padding属性设置
- 外边距：元素边框的外围空白区域，通过margin属性设置
  - 内边距设置方法：

padding-top:10px;
padding-right:10px;
简写：padding:上 右 左 下;
亦可写作：padding:10px(上下) 20px(左右);

- - 外边距设置方法：

margin-top:10px;
margin:上 右 左 下;

浮动

多幅图片都设置为左浮动时IE6浏览器会存在一个双倍计算问题，这时需要我们通过在"margin：mpx npx ppxqpx;"之后加上一句"display：inline"去掉IE6的特殊情况
++display:inline++：作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span）而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。

image

可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边。因为div元素是块级元素，独占一行
如何在一行显示多个div元素？
- ++display:inline-block++(ie6浏览器不支持，其余的常用浏览器一般都支持)
  - 然而，一般我们不可能通过改变元素的定位来完成使其不同块排在同一行，故此法不可行
显然默认的标准流已经无法满足需求，这就要用到浮动，浮动可以理解为让某个div元素或其他块级元素脱离标准流，漂浮在标准流之上

image
)
浮动的设置方法：float:left/right;
若不想标准流中的元素收到浮动的影响怎么办？
- clear:both;
- none:默认值。允许两边都有浮动对象
- left:不允许左边有浮动对象（顶到最左）
- right:不允许右边有浮动对象（顶到最右）
- both:不允许有浮动对象
若连续多个元素设置浮动呢？

<head>
<style type="text/css">
    #div1{clear:left;}
    #div2{clear:left;}
    #div3{clear:left;}
    #div4{clear:left;}
</head>
<body>
<div id="">我是一个div块</div>
</body>

- 被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的宽度不够才会换一行排列

相对定位与绝对定位

相对定位（以原来位置为参考）
- position:relative;
- left:;
- right:;
- top:;
- bottom:;
- 为元素设置相对定位之后，元素依然会占据原来的空间，依然在标准流中

<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:relative;
        left:20px;      /*左边空出20px;*/
        top:30px;       /*上边空出20px;*/
        /*用左无右，用上无下【只能用一个。相对于原来的位置进行定位（偏移）】*/
        /*方位词后的像素偏移量可以为负*/
    }
    #div2{
        width:100px;
        height:100px;
        background:#6633FF;
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
</body>

image

- - 效果如图，div1经过相对定位后覆盖了div2的一部分。
绝对定位（以页面为参考）
- position:absolute;
- left:;
- right:;
- top:;
- bottom:;
设置绝对定位后就不再存在于原来的基本流中（即元素不会占据原来的空间，脱离了原来的队伍）

<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:relative;
    }
    #div2{
        width:100px;
        height:100px;
        background:#6633FF;
        position:absolute;
    }
    #div3{
        width:100px;
        height:100px;
        background:#8844FF;
        position:relative;
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
    <div id=div3>div3</div>
</body>

image

- - 如图，并非div3没有了，而是div3上去了，补在了div2的位置。而div2已跳出原基本流，视觉上覆盖在div3之上
  - 规矩一样，有左无右，有上无下
  - 绝对定位覆在上边
固定定位（无论滚动条如何移动都保持在屏幕中的位置不变）
- position:fixed;
- 和上面的一样在此就不加图片和代码演示了
- IE6无法实现fixed固定定位
重叠元素的堆叠顺序设置
- z-index:;
- 对设置了相对或固定定位的元素进行堆叠顺序的设置，设置的数值越大，即堆叠越在上层。
- 该属性可为负值

<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:absolute;
        z-index:1;  /*若无此属性则默认z-index值为0*/
    }
    #div2{
        width:100px;
        height:100px;
        left:50px;
        top:50px;
        background:#6633FF;
        position:absolute;
        z-index:2;  /*哪个值大哪个在上（值亦可为负）*/
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
</body>

构造列表

构造列表
- 将ul或ol设置为list-style:none;
- 本节课任务：
- image
- 边框个颜色：#BBBBBB
- 下边框颜色：#dedede
- 列表每行高度：31px
- 文字缩进：35px

<!Doctype html>
<html langg="zh-CN">
<head>
<meta charset="utf-8" />
<title>构造列表</title>
<style type="text/css">
    ul{
        list-style:none;
        /*去掉列表后那个点*/
        margin:0px;/*去掉外边距*/
        padding:0px;/*去掉内边距*/
        /*双重保险*/
    }
    #nav ul.list{
        width:130px;    /*给li添加一个长度值限定下边框长度*/
        background:#F8F8F8;/*添加背景色*/
        border:1px solid #BBBBBB;
        padding:0px 20px;/*继续微操，控制左端边距为20px调距离*/
    }
    nav ul.list li{
        height:31px;
        line-height:31px;  
        /*设置字的行高（目的为使之居中）*/
        /*工作中一般将其设置的和下边框（height）距离一样,来达到文字上下居中的效果*/
        border-bottom:1px solid #dedede;    /*下边框*/
        text-index:35px;        /*控制缩进*/
        font-size:14px;
        font-weight:400;
        font-family:微软雅黑;
        color:#3c3c3c;
    }
    #nav ul.list li a{
        color:#3c3c3c;
        text-decoration:none;
    }
    #nav ul.list li a:hover{
        text-decoration:underline;
    }
    
    /*用双重坐标更加精确*/
    ul.list li.li-0{
        background:url(小图标地址) 0px center/*x轴最左边，y轴居中*/ no-repeat/*只显示一个*/;
    }
    ul.list li.li-1{
        background:url(小图标地址) 0px center no-repeat;
    }
    ul.list li.li-2{
        background:url(小图标地址) 0px center no-repeat;
    }
    ul.list li.li-3{
        background:url(小图标地址) 0px center no-repeat;
    }
    
    /*亦可如此*/
    .li-4{
        background:url(小图标地址) 0px center no-repeat;
    }
    .li-5{
        background:url(小图标地址) 0px center no-repeat;
    }
</style>
</head>
<body>
<div id="nav">
    <ul class="list">
        <li class="li-0"><a href="http://baidu.com" target="_blank">服装内衣</li>
        <li class="li-1"><a href="http://baidu.com" target="_blank">鞋包配饰</li>
        <li class="li-2"><a href="http://baidu.com" target="_blank">运动户外</li>
        <li class="li-3"><a href="http://baidu.com" target="_blank">珠宝手表</li>
        <li class="li-0"><a href="http://baidu.com" target="_blank">手机数码</li>
        <li class="li-0"><a href="http://baidu.com" target="_blank">家电办公</li>
    </ul>
</div>
</body>

布局初探

固定浮动布局
固定浮动布局即是用固定的值将元素的长度设置为固定不变，然后配合浮动的技术实现整个页面的一个布局
- 块级元素如何行对于父元素居中？
  - 元素需要设置长度。元素的左右外边距（margin-left/right:auto;）设置为auto（自动）即可
  - {margin-left:auto;margin-right:auto;}可简写为{margin:0px auto;}

Tips

不想受浮动（float）影响：选中你想要的部分去除浮动（clear:both;）

去掉/添加<a></a>默认下划线（鼠标不指上去的情况下）：text-decoration:none/underline;

边框边界：border-bottom/top/right/left:npx dashed(虚线)/(实线) 颜色;

一般来说文字上下有距离时应用盒模型的内边距挤距离：padding:apx bpx cpx dpx;当然，亦可用外边距margin挤（二者看上去没什么区别）

更改背景图片位置：backfround:url() apx(距离左端距离apx) no-repeat()

div居中：

{width:apx;margin:0 auto;}/需要测宽度，比较繁杂且不能防止字数变长/
{text-align:center;}

一段居中文字（中间有间距，大小需要设置，在此定为30px）.因为最后一段后仍会有30px的间距，造成不居中，故我们可以将最后一段选中用margin消除最后一段的间距

<style type="text/css">此处写CSS代码
    a{
        margin:0 30px 0 0;
    }
    a.last{
        margin:0;
        /*将上边的margin覆盖掉*/
    }
</style>
<body>
    <a herf="#" target="_blank">首页</a>
    <a herf="#" target="_blank">美站</a>
    <a herf="#" target="_blank">酷文</a>
    <a class="last" herf="#" target="_blank">联系我们</a>
</body>

提升用户体验

点击汉字亦会自动选中表单填写框

/*利用id将input表单和label（提升用户体验用的标签）联系起来*/
/*标签for属性与相关 input 的 id 属性相同*/
<div>
<form action="#" name="form1">

    <label for="label1">您的姓名</label>
    <input type="text" name="name" id="label1" />
    /*二者id相同*/
    
    <label for="label2">您的联系方式</label>
    <input type="text" name="contact" id="label2" />
    /*二者id相同*/
    
</form>
</div>

image

若希望姓名，联系方式和表单分别单独占据一行，可以用</br>，亦可选中form后在CSS文件中加form label{display：block;}
image
Ps：此处时将label盒模型外边距中的上边距设定为15px,以此来向您展示input表单的从属关系

调整input框的大小

CSS:
    form input{
        width:;
        height:;
    }
HTML:
    <input type="text" name="name" id="label" size="50px">
/*size="50px"即是将表单的长度调为了50px，但是高度只能在CSS中控制*/

<div>
<form action="#" name="form1">

    <label for="label1">您的姓名</label>
    <input type="text" name="name" id="label1" size="50"/>
    /*二者id相同*/
    
    <label for="label2">您的联系方式</label>
    <input type="text" name="contact" id="label2" size="50/>
    /*二者id相同*/
    
    <label for="label3">站点网址</label>
    <input type="text" name="contact" id="label3" size="50/>
    
    <label for="label4">站点介绍</label>
    <textarea name="info" id="label4" cols="50" rows="8"></textarea>
    /*                                   50列       8行       */
    
</form>

CSS教程

CSS基本语法

CSS选择器

简单选择器

1.++id选择器++

2.++类(class)选择器++

3.++标签选择器++

复杂选择器

4.++交集选择器:++

4.++并集选择器++

使鼠标指上去后出现不同效果————伪类选择器（hover）

构造文本

CSS长度值的单位

用CSS给网页装潢[4]--构造块级元素

1.块级元素

后代元素长度大于祖辈元素大小时的处理方法：

盒模型概念

浮动

多幅图片都设置为左浮动时IE6浏览器会存在一个双倍计算问题，这时需要我们通过在"margin：mpx npx ppxqpx;"之后加上一句"display：inline"去掉IE6的特殊情况

相对定位与绝对定位

设置绝对定位后就不再存在于原来的基本流中（即元素不会占据原来的空间，脱离了原来的队伍）

构造列表

布局初探

固定浮动布局

Tips

不想受浮动（float）影响：选中你想要的部分去除浮动（clear:both;）

去掉/添加<a></a>默认下划线（鼠标不指上去的情况下）：text-decoration:none/underline;

边框边界：border-bottom/top/right/left:npx dashed(虚线)/(实线) 颜色;

一般来说文字上下有距离时应用盒模型的内边距挤距离：padding:apx bpx cpx dpx;当然，亦可用外边距margin挤（二者看上去没什么区别）

更改背景图片位置：backfround:url() apx(距离左端距离apx) no-repeat()

div居中：

一段居中文字（中间有间距，大小需要设置，在此定为30px）.因为最后一段后仍会有30px的间距，造成不居中，故我们可以将最后一段选中用margin消除最后一段的间距

提升用户体验

调整input框的大小

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读