web颜值要爆表Web前端之路Web 前端开发

css语法部分

2017-05-22  本文已影响49人  2e919d99a871

前言: 看了几天HTML标签和CSS布局,我狭义的认为他们就是iOS里面的视图控件了.而且布局相对于iOS要简单一点,虽然我大iOS有AutoLayout,但是UIScrollView之类的控件写起来还是要相对复杂一点的.各有利弊,以后再边学边比较吧.(以上纯属个人看法)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
#shijian{
color:green;
font-size:5px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>慕课网，<span>超酷的互联网</span >、IT技术免费学习平台，创新的网络一站式学习、<span id = "shijian">实践体验</span>；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>

#shijian{
color:blue;
font-size:30px;
}
结论: 此时"实践体验"字体是蓝色的,因为嵌入式css样式的位置在外部式的前面了.
```

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food > li{color: blue;}/添加边框样式（粗细为1px， 颜色为红色的实线）/
.first > span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
效果图时这样的:
```

14954364402366.jpg 
```
子选择器我开始没看懂,但是看到评论区有个人分析,才恍然大悟,>这个“选择指定标签元素的第一代子元素”就是让样式只作用于它的孩子，不作用与他的孙子。注意看这段代码:
<p class="first"><span>我还是一个<span>胆小如鼠</span>的小女孩</span></p>
看清了外面的span是p标签的亲儿子,而里面的span是p标签的孙子,所有,子选择器选择的是外面的span标签,所以是外面的span元素有红色边框...(说实话,技术课程搞那么多虚的概念不如大白话来的明白!)
```

与子选择器的区别: 子选择器仅是指它的直接后代,而后代选择器作用与所有后代子元素.

```HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;border: 1px solid blue;}

.food li{
    border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/   
}
</style>
</head>
<body>
 <p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

代码运行结果:
```
14954371747130.jpg

注意: 慕课给出的例子还是不太容易理解,我对代码稍稍做了修改,更能轻易的对比出包含选择器和子选择器的区.

意思就是为a标签划过的状态设置字体颜色变红.目前为止,可以兼容所有浏览器的"伪类选择符"就是a标签上使用 :hover了,比较常用的还是 a:hover 的组合

示例:

```HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">

.first span,#second span,.askMe span{color:green;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会<span class = "askMe">批评我</span>。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    ![](http:https://img.haomeiwen.com/i1526313/760d0a2982c0befd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</body>
</html>
```

span中的文本也被设置成了红色.但有一些css样式是不具有继承性的.比如 border:1px solid red;

权值的规则:
标签权值为1,类选择符的权值为10,ID选择符的权值最高为100.继承也有权值,但是最低(0.1)

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。*/
```

注意: !important要写在分号的前面,即使是下面的代码(类选择器的权值高于标签),p段落的文本也会显示红色哦~

```HTML
p{color: red !important;}
.first{color: green}
<p class = "first"> 三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</span>
```

注意: 不要设置不常用的字体,因为如果用户本地电脑上没有安装你设置的字体,就会显示浏览器的默认字体.一般的网页喜欢设置"微软雅黑":

```CSS
body{font-family: "Microsoft Yahei";} 
/*or*/
body{font-family: "微软雅黑";}
/*第一种比第二种兼容性更好一些*/
```

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
将内联元素a转换为块状元素:
a{display: block;}

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
将块状元素转换为内联元素:
div{display: inline;}

内联块状元素特点:
同时具有内联元素和块状元素的特点.
1、和其它元素都在一行上;
2、元素的高度、宽度、行高以及顶和低边距都可设置
将元素设置为内联块状元素:
display: inline-block;


    ```
       <!--a 
       元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。如果将a元素设置为内联块状元素就可以了.
       -->
       <html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
       <title>内联块状元素</title>
       <style type="text/css">
       a{
           display: inline-block;
        width:20px;/*在默认情况下宽度不起作用*/
        height:20px;/*在默认情况下高度不起作用*/
        background:pink;/*设置背景颜色为粉色*/
        text-align:center; /*设置文本居中显示*/
       }
       </style>
       </head>
       <body>
       <a>1</a>
       <a>2</a>
       <a>3</a>
       <a>4</a>
       </body>
       </html>
    ```

* 19 盒模型的边框

    ```CSS
    /*边框: 盒子模型的边框就是围绕着内容及补白的线,这条线可以设置它的粗细、样式和颜色*/
    div{ border: 2px solid red; }
    /*也可以写成这样*/
    div{
        border-width: 2px;
        border-style: solid;
        border-color: red;
    }
    ```

    ```
    注意:
    1、border-style（边框样式）常见样式有：
    dashed（虚线）| dotted（点线）| solid（实线）。
    2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
    border-color:#888;//前面的井号不要忘掉。
    3、border-width（边框宽度）中的宽度也可以设置为：
    thin | medium | thick（但不是很常用），最常还是用象素（px）。
    ```

    ```CSS
    /*单独设置一个方向的边框*/
    div{border-bottom: 1px solid red;}
    /*同样可以使用下面的代码设置其他方向的边框*/
    div{
        border-top: 1px solid red;
        border-right: 1px solid red;
        border-left: 1px solid red;
    }
    ```
* 20 盒模型的宽度和高度    

    ```
    盒模型的宽度和高度指的是填充以里的内容范围.
    一个元素实际宽度(盒子的宽度) = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 有边框 + 右边界.
    元素的高度同理.
    ```

![14951611926229.jpg](http:https://img.haomeiwen.com/i1526313/14cb27777005677e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

      
* 21 盒模型的填充

    ```CSS
    元素的内容和边框之间是可以设置距离的,称之为"填充",填充可分为上右下左(顺时针).
    div{padding: 20px 10px 15px 30px;}
    /*顺序不要搞混,可以分开写上面的代码*/
    div{
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 30px;
    }
    /*如果上右下左的填充都为10px,可以这样*/
    div{padding: 10px;}
    /*如果上下填充一样,左右一样,可以这样*/
    div{padding: 10px 20px;}
    ```

![~HQX@~G~H7P5%0I~~-OU5-O.jpg](http:https://img.haomeiwen.com/i1526313/a027d2215e99871b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)

![14951644122414.jpg](http:https://img.haomeiwen.com/i1526313/a8670ad8655789f6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)


* 22 盒模型的边界

    ```CSS
    /*使用边界margin来设置,边界也是可分为上右下左:*/
    div{margin: 20px 10px 15px 30px;}
    /*也可以分开写*/
    div{
        margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 15px;
        margin-left: 30px;
    }
    /*边界都一样的*/
    div{
        margin: 10px;
    }
    /*上下一样,左右一样的*/
    div{
        margin: 10px 20px;
    }
    ```
    ```
    结论: padding和margin的区别,padding在边框里,margin在边框外
    ```
* 23 css布局模型

    ```
    清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 
    CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
    在网页中，元素有三种布局模型：
    1、流动模型（Flow）
    2、浮动模型 (Float)
    3、层模型（Layer）
    ```
* 24 流动模型   

    ```
    流动是默认的网页布局模式.网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.流动布局模型具有2个比较典型的特征:
    第一,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.
    第二,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示.
    ```
* 25 浮动模型

    ```HTML
    块状元素独占一行,如果我们想让两个块状元素并排显示,怎么办呢?答案是设置元素浮动.
    默认情况下,任何元素都是不能浮动的,但是可以用CSS定义为浮动.如下代码可以实现两个div元素一行显示
    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        float: left
    }
    <div id = "div1"></div>
    <div id = "div2"></div>
    ```
![14951841449148.jpg](http:https://img.haomeiwen.com/i1526313/f8c5f013faff9703.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)
    ```
    /*当然也可以设置两个元素右浮动,也可以实现一行显示*/
    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        float: right;
    }
    ```

![14951842383390.jpg](http:https://img.haomeiwen.com/i1526313/08bfcd07776f0ca5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)


    ```css
    /*设置一左一右*/
    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
    }
    #.div1 {float: left;}
    #.div2 {float: right;}
    ```

![14951843627308.jpg](http:https://img.haomeiwen.com/i1526313/1f0638416449488a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/550)

* 26 层模型

    ```
    CSS定义了一组定位(positioning)属性来支持层布局模型.
    层模型有三种形式:
    1. 绝对定位(position: absolute)
    2. 相对定位(position: relative)
    3. 固定定位(position: fixed)
    ```
    ```
    层模型的绝对定位: 将元素从文档流中拖出来,然后使用left 、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位.如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口.
    ```
**个人总结: 相当于移动端开发的frame布局(这点大家都很懂,蜜汁微笑)**

    ```CSS
    div{
        width: 200px;
        height: 200px;
        border: 2px red solid;
        position: absolute;
        left: 100px;
        top: 50px;
    }
    <div id = "div1"></div>
    ```
效果如下:

![14951852082151.jpg](http:https://img.haomeiwen.com/i1526313/31f9101bc5c9d49c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500)



层模型的相对定位
position: relative(表示相对定位),它通过left、right、top、bottom属性确定元素
在正常文档流中的偏移位置.首先按static(float)方式生成一个元素(并且元素像层一样浮动
了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性
确定,偏移前的位置保留不动.
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: relative;
    left: 100px;
    top: 50px;
}
<div id = "div1"></div>
```

效果图:


14951876467910.jpg 
 /*如果加上这段代码,便能清楚的理解"偏移前的位置保留不动"了,效果图如下*/
<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
14951877626489.jpg 
层模型的固定定位:
注意: 如果你是移动端开发者,你可以把它理解成一个悬浮框(解释的内容可以跳开不看了),如果不明白,再去看如下解释
fixed: 表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身,由于视图本身是固定的,他不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口视图的某个位置,不会受到文档流动影响.
代码:
#div1{
  width:200px;
  height:200px; 
  border:2px red solid; 
  position: fixed; 
  bottom: 0; 
  right: 0;
}
<div id="div1"></div>

结束语:
持续挖坑中...

上一篇 下一篇

猜你喜欢

热点阅读