时间戳

首页 > 技术文章 > CSS

CSS

xone 2017-02-13 16:10 原文

CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术

 

一、回顾：

HTML

客户端浏览器：


服务器Sokect：
　　程序员：
　　接受url
　　open()

HTML标签：

- table,tr,td,th
- br
- <input type='text' /> type='file' password checkbox radio button submit
- p
- h系列
- span
- label
- a
- div
- form
- img
- textarea
- select
- ul,li ol dl
- body
- html
- input

====>
套路：
绿叶：div,span,url,table
红花：

p标签下不能套div标签


<form action='要提交的url地址' method='GET或POST' enctype='multipart/form-data'>

<div>
<input type='text' name='user' value='默认值' />
</div>

<div>
<input type='password' name='user' value='默认值' />
</div>

<input type='email' name='user' value='默认值' />

<input type='radio' name='n' value='1' checked='checked' />
<input type='radio' name='n' value='2' />


<input type='checkbox' name='hobby' value='1' />
<input type='checkbox' name='hobby' value='2' />
<input type='checkbox' name='hobby' value='3' />

<input type='file' name='fafafa' />

<select name='city'>
<option value='bj'>北京</option>
<option value='sh'>上海</option>
</select>

<textarea name='ta'>默认值位置</textarea>

<input type='button' />
<input type='reset' />
<input type='submit' />
</form>

Form表单提交：
- GET 提交的数据放置的URL中：https://www.sogou.com/web?query=haitao&v=123&v=456
- POST 提交的数据放置在请求体中

二、css

1.css的概念以及css的初体验


--CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术
--css的语法结构：
color:red;font-size: 20px;

2.css的编写方式

2.1 行内样式 

<div style="color:red;font-size: 20px;">css的初体验</div>

2.2 内部样式

    div{
color:red;
font-size: 20px;
}
<div>css的初体验2</div>

各种选择器

--标签选择器：

    div{
color:red;
font-size: 20px;
}
<div>css的初体验2</div>

--id选择器：

#two{
color: yellow;
}
<div id="two">css的初体验2</div>
id不要重复 只能唯一

--类选择器

.three{
color:blue;
}
<div class="three">css的初体验2</div>
<span class="three">span标签</span>

--包含选择器

.four span{
color:green;
}
<div class="four">
<span>css测试dsad</span>
</div>

--分组选择器

div,span,h2{
color:orange;
}

--通用选择器

*{
color:gray;
} 

鼠标访问样式

:link      定义超链接默认样式

:visited    定义访问过的样式

:hover     定义鼠标经过的样式

:active     定义鼠标按下的样式

 
a:link { color:#ff0000; }  /*默认样式，超链接文字为红色*/

a:visited { color:#00ff00; }  /*访问过后，超链接文字为绿色*/

a:hover { color:#0000ff; }  /*鼠标经过，超链接文字为蓝色*/

a:active { color:#ffff00; }  /*鼠标按下时，超链接文字为黄色*/

选择器的优先级：

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

2.3 引入外部样式

方式一：

    <style>
        @import "css3.css";

    </style>

方式二：推荐

<link href="css3.css" type="text/css" rel="stylesheet">

并列样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .rr {
            font-size: 10px;
        }
        .tt {
            font-size: 40px;
        }

    </style>

</head>
<body>

<div>
    <p class="tt rr">fdss</p>    #这个class可以叫tt，也可以叫rr，这里的样式规则是下面覆盖上面
    <p class="ee rr">dsds</p>    #这样写的好处是rr写相同的样式，ee，tt写不同的样式
</div>

</body>
</html>

对具有相同class名的不同标签加不同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .rr {
            background-color: lightcoral;
        }

        div.rr{
            background-color: lightblue;
        }

    </style>

</head>
<body>

<div>
    <p class="rr">p rr</p>
    <div class="rr">div rr</div>
</div>

</body>
</html>

 

实例：

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }

 

实例：

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

属性选择器

E[att]　　匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）

E[att=val]　　匹配所有att属性等于"val"的E元素

E[att~=val]　　匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素

E[att|=val]　　匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"val"开头的E元素，主要用于lang属性，比如"en"、"en-us"、"en-gb"等等

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

E[att^="val"]　　属性att的值以"val"开头的元素

E[att$="val"]　　属性att的值以"val"结尾的元素

E[att*="val"]　　 属性att的值包含"val"字符串的元素

div[id^="nav"] { background:#ff0; }

3.css的基本属性

--文字段落

边框设置：border
宽度，样式，颜色 (border: 1px solid red;)

文本行高：line-height
语法： line-height：行高值(像素)

水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐

背景属性

背景颜色：background-color
关键字：red pink orange

背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）

背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺

背景位置：background-position
background-position-x:200px ;
background-position-y:100px;

经典用法：

加载一张大图只显示其中的一小部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myimg{
            width:18px;
            height: 18px;
            background-image: url("02.png");
            background-position-y: 130px;
        }
    </style>
</head>
<body>
    <div id="myimg">

    </div>
</body>
</html>

margin 属性

margin属性会以上一层的text或border或padding为相对位置，上一层没有往上继续找。

兄弟级的上下margin只取一个值，取大的。

4.布局属性

　　float
　　　　float:none; 默认值
　　　　float:left; 左浮
　　　　float:right;右浮

　　清除浮动(控制的是它本身)：

　　　　clear:left;清除左浮

　　　　clear:right;清除右浮

　　　   cleat:both;清除所有浮动

 

　　溢出处理属性overflow分类
　　　　Overflow (水平和垂直均设置)
　　　　Overflow-x (设置水平方向)
　　　　Overflow-y (设置垂直方向)

 

溢出处理属性overflow-x

未设置溢出处理属性

设置 水平滚动条（overflow-x:scroll）

溢出处理属性overflow-y

未设置溢出处理属性

设置垂直滚动条（overflow-y:scroll）

定位属性position:

fixed : 将某个元素固定在页面的某个位置

absolute :  绝对定位

relative：相对定位 

实例：

父元素用relative，子元素用absolute。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            width: 200px;
            height: 100px;
            background-color: darkseagreen;
            position: relative;
        }
        #i2{
            width: 50px;
            height: 20px;
            background-color: pink;
            position: absolute;
            left: 20px;
            top: 30px;
        }
    </style>

</head>
<body>
<div id="i1">
    <div id="i2"></div>
</div>
</body>
</html>

定位属性z-index:

Z-index：设置对象的层叠顺序

特点：

   较大 number 值的对象会覆盖在较小 number 值的对象之上 


5.浏览器兼容性的问题

 

推荐阅读