前端基础知识概览

不止秋风
138 阅读9分钟

前端基础知识概览（css）

上一篇文章已概述了 前端的组成以及前端常用的 html标签

那这篇文章就只讨论 CSS。

众所周知如果拿html和房子作比较的话 ：html相当于 房子的基本骨架 没有瓷砖和粉刷修饰 ， 就显得很单调，而 CSS就完美的解决了html的单调， 让页面更好看。

好的 ， 那接下来步入正题吧

CSS简介：

层叠样式表

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。

作用:给页面排版写样式.W3C要求内容和样式分离.html专门负责展示内容, css专门负责排版.后缀名:.css

页面引入CSS的方式 :

如果给一个地方设置多种样式,谁最后执行就显示谁的样式.(就近原则)

行内css :(不推荐)

直接在标签中用style属性写样式.(不提倡使用)

优点:使用方法. 缺点:不能实现样式利用;违反W3C规范.

<!--行内css-->
<h1 style="color: red;">我是中国人</h1>

内部css:（不推荐）

在标签中写css.

优点:可以实现页面内样式利用;符合W3C规范 缺点:不能实现页面间样式利用;

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>页面引入css的方式</title>
                <!--内部css-->
                <style type="text/css">
                        h2{
                                color: blue;
                        }
                </style>
        </head>
        <body>
                <h2>good good study,day day up</h2>
        </body>
</html>
​

外部css:(推荐)

创建一个外部css文件写css代码,哪个页面想使用这个css样式就引入.

优点:可以实现页面间样式利用;符合W3C规范; 缺点:要单独写文件.

css

h3{
        color: green;
}

html

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>页面引入css的方式</title>
                <!--内部css-->
                <style type="text/css">
                        h2{
                                color: blue;
                        }
                </style>
                <!--引入外部css-->
                <link rel="stylesheet" href="css/1.css" />
                
        </head>
        <body>
                <!--行内css-->
                <h1 style="color: red;">我是中国人</h1>
                <h2>good good study,day day up</h2>
                <h2>今天天气不错</h2>
                <h3>dfieiiedfa吃了没?</h3>
        </body>
</html>

导入外部css:(了解)

创建一个外部css文件写css代码,哪个页面想使用这个css样式就在标签中导入.

特点:运行时先加载当前html页面,再加载导入css样式.

<!--导入外部css-->
<style type="text/css">
    @import url("css/test.css");
</style>

外部CSS 对比 导入CSS

  • 浏览器支持性不同:所有浏览器支持外部css;只有部分浏览器支持导入css.

  • 加载时间不同:外部css和当前html页面合二为一,一起加载;

    导入css是先加载当前html页面,再加载导入的css;

  • js支持性不同:外部css支持用javaScript代码动态修改; 导入css不支持javaScript代码动态修改;

css的语法总结

选择器{
    样式属性名1:值1;
    样式属性名2:值2;
    ...
  }

注释:

给代码写解释说明.

/*注释的内容*/

选择器:

优先级:id选择器>类选择器>标签选择

标签选择器:

直接以html标签作为选择器,选中页面上这一类标签.

/*标签选择器*/ 
h1{
     color: red;
   }

类选择器

给想要设置样式的地方用class="类名"取类名,

.类名表示选中这一类标签.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>选择器的使用</title>
                <!--内部css-->
                <style type="text/css">
                        /*标签选择器*/
                        h1{
                                color: red;
                        }
                        
                        /*类选择器*/
                        .a1{
                                color: orange;
                        }
                        
                </style>
        </head>
        <body>
                <h1>学知识的过程:</h1>
                <!--给标签取类名-->
                <h2 class="a1 a2 a3">知道有这个知识存在</h2>
                <h2 class="a1">这个知识做什么用的</h2>
                <h2>这个知识怎么用的</h2>
                <h2>这个知识用在什么地方</h2>
        </body>
</html>

id选择器:

给标签用id="id名"取id名,用#id名表示选中这个标签.

注意:在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>选择器的使用</title>
                <!--内部css-->
                <style type="text/css">
                        #d1{
                                color: purple;
                        }
                        
                </style>
        </head>
        <body>
                <!--给标签取id名-->
                <div id="d1">
                        大家好
                </div>
                
        </body>
</html>

通配选择器(全局选择器):

*表示选整个页面上所有标签.

/*全局选择器*/
*{
    background-color: greenyellow;
}

子选择器:

表示选中指定标签中另一类标签(只管儿子这一代).选择器间用>分隔

/*子选择器*/
ul>span{
    color: pink;
}

后代选择器:

表示选中指定标签中所有另一类标签.选择器间用空格分隔

/*后代选择器*/
ul span{
	color: pink;
}

群组选择器:

用多种不同方式选中标签,设置相同样式.选择器间用逗号分隔

/*群组选择器*/
div,.a1,#d4{
    color: red;
}

属性选择器:

表示选中的标签指定属性特征.选择器[属性名]

/*属性选择器*/
h2[class$="a2"]{
    color: red;
}

nth-child(n) 选择器:

规定属于其父元素的第二个子元素的每个 p 的背景色：

n 可以是一个数字，一个关键字，或者一个公式

p:nth-child(2)
{
	background:#ff0000;
}

超链接伪类样式

未访问的链接

a:link {
  color: #FF0000;
}

已访问的链接

a:visited {
  color: #00FF00;
}

鼠标悬停链接

a:hover {
  color: #FF00FF;
}

已选择的链接

a:active {
  color: #0000FF;
}

CSS中常用样式

字体样式

color字体颜色; font-size字体大小; font-weight 字体的粗细。 font-family 字体的类型,eg:"宋体" font-style 字体倾斜 font:倾斜 粗细 大小/行高 类型;

<html>
        <head>
                <meta charset="UTF-8">
                <title>2.css中常用样式属性</title>
                <!--内部css-->
                <style type="text/css">
                        #d1{
                                /*字体颜色*/
                                color: red;
                                /*字体大小*/
                                /*font-size: 30px;*/
                                
                                /*粗细*/
                                /*font-weight: bolder;*/
                                /*倾斜*/
                                /*font-style: italic;*/
                                /*类型*/
                                /*font-family:"楷体";*/
                                
                                font:italic bolder 30px "楷体";
                                
                        }
                        
                </style>
        </head>
        <body>
                <div id="d1">Hello world</div>
                <div>非常好,一起学Java</div>
        </body>
</html>

文本样式

text-align 文本水平对齐 text-decoration 文本修饰 line-height 行高 letter-spacing 字符间距 text-indent 首选缩进

.c2{
    /*水平居中
    text-align: center;*/
    /*文本修饰
    text-decoration: underline;*/
    /*行高*/
    line-height: 100px;

    /*首选缩进*/
    text-indent: 50px;

    /*字符间距*/
    letter-spacing: 10px;

}

/*去掉超链接下划线*/
a{
    text-decoration: none;
}

背景样式

注意:

  • 因为背景图片会将背景颜色覆盖,所以一般情况不用给同一个地方同时设置背景颜色和背景图片.
  • 顺斜杠:/,它表示网络路径;反斜杠:,它表示window路径;
  • 图片标签的路径中顺斜杠和反斜杠都可用
  • 背景图片的路径中只认顺斜杠.

综上所述:以后无特殊情况只要是路径全用顺斜杠.

background-color 背景颜色 background-image:url(图片相对路径); background-repeat 背景平铺方式 background: 背景颜色 url(背景图片) 平铺方式;

body{
    /*背景颜色
    background-color: red;*/
    /*背景图片
    background-image: url("img/gameBg2.jpg");*/
    /*背景平铺方式
    background-repeat: no-repeat;*/
    /*背景总样式*/
    background: red url(img\gameBg2.jpg) repeat;
}

列表样式

list-style 列表样式 list-style-type 列表类型(样式) list-style-image 列表图片 list-style-position 列表图片或图片的位置

li{
    /*边框线*/
    border: solid 1px red;
    /*列表类型*/
    /*list-style: none;去掉列图标*/
    list-style-type:decimal;
    /*列表图片:在同一个地方不要同时设置列表图标和图片*/
    list-style-image: url(img/sub-3.gif);
    /*列表图标或图片位置*/
    list-style-position: inside;
}

拓展样式

display:none(隐藏)/block(将元素将显示为块级元素)/inline(将元素将显示为行级(内联)元素)

.c3 {
    width: 300px;
    height: 60px;
    border: solid 1px red;
    display:none;
}

文本溢出:overflow: visible(全部显示)|hidden(超出部分隐藏)|croll(超出部分用滚动条展示);

.c3{
    width: 300px;
    height: 60px;
    border: solid 1px red;
    /*文本溢出*/
    overflow: scroll;
}

#d4{
    width: 300px;
    height: 50px;
    /*超过部分隐藏*/
    overflow: hidden;
}

#d4:hover{
    /*超过部分全部显示*/
    overflow: visible;
}

盒子模型

css中将每个标签看作盒子模型. 方位顺序:上右下左 注意:一般情况下,所有标签默认都有内外边距.

边框线border:每个标签都可以设置边框线. 内边距padding:标签内容距离边框线之间距离叫内边距. 外边距margin:标签边框线与周围元素的距离. 盒子模型的宽度=元素宽度+左右内边距+左右边框线. 盒子模型的高度=元素高度+上下内边距+上下边框线.

注意:盒子模型样式一般用来设置元素与周围元素间距离,能用外边距调整,就不要用内边距.

/*去掉所有标签内外边距*/
*{
    margin: 0px;
    padding: 0px;
}
/*设置整个模块水平居中,配置模块width属性一起使用*/
margin: 0px auto;

position定位:

static(静态定位,默认),

relative(相对定位),

absolute(绝对定位),

fixed(固定定位).

relative(相对定位):

相对自身原来的位置发生偏移,元素没有脱离标准文档流,还是占着原来的位置,不影响周围元素. 作用:微调元素距离.

/*相对定位*/
position: relative;
left: -150px;
top:-100px;

absolute(绝对定位):

绝对定位相对设置了position的父标签来定位的,如果当前元素所有父标签没有设置position,相对于浏览器容器左上角(原点)定位.绝对定位的元素脱离标准的文档流,不占原页面的位置,那么后面元素会受影响. 作用:作二级漂浮菜单.

/*绝对定位*/
position: absolute;
top:100px;
left: 200px;

fixed(固定定位):

相对浏览器窗口定位.配合设置元素层次的属性一起使用. z-index:数字(层次);0层是当前标准html页面,大于0层. 作用:作流氓广告.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>3.定位</title>
                <!--内部css-->
                <style type="text/css">
                        /*去掉内外边距*/
                        *{
                                margin: 0px;
                                padding: 0px;
                        }
                        
                        #container{
                                width: 500px;
                                height: 2600px;
                                border: solid 1px black;
                                margin: 0px auto;
                        }
                        
                        #d1,#d2,#d3{
                                width: 400px;
                                height: 100px;
                                margin-top: 50px;
                                margin-left: 50px;
                                
                        }
                        
                        #d1{
                                border: solid 1px green;
                        }
                        
                        #d2{
                                border: solid 1px red;
                                
                                /*相对定位
                                position: relative;
                                left: -150px;
                                top:-100px;*/
                                
                                /*绝对定位
                                position: absolute;
                                top:100px;
                                left: 200px;*/
                                
                        }
                        
                        #d3{
                                border: solid 1px blue;
                        }
                        
                        #img4{
                                /*固定定位*/
                                position: fixed;
                                left: 400px;
                                top: 200px;
                                /*设置元素层次*/
                                z-index: 1;
                        }
                        
                        #img5{
                                /*固定定位*/
                                position: fixed;
                                left: 886px;
                                top: 200px;
                                /*设置元素层次*/
                                z-index: 2;
                        }
                
                </style>
        </head>
        <body>
                <img id="img4" src="img/img-3.jpg"/>
                <a href="http://www.4399.com"><img id="img5" src="img/x.jpg"/></a>
                <div id="container">
                        <div id="d1">111</div>
                        <div id="d2">222</div>
                        <div id="d3">333</div>
                </div>
        </body>
</html>

浮动(float):

让块级元素变成行级元素.注意:浮动元素会影响后面紧跟着的元素. 后面元素不想受影响,要用

clear:left/right/both;

float:left/right;

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>4.浮动</title>
                <!--内部css-->
                <style type="text/css">
                        /*去掉所有标签内外边距*/
                        *{
                                margin: 0px;
                                padding: 0px;
                        }
                        
                        ul{
                                width:1000px;
                                height: 50px;
                                background-color: #FF0000;
                                /*整体水平居中*/
                                margin: 0px auto;
                        }
                        
                        li{
                                /*去掉列表项图标*/
                                list-style: none;
                                width: 100px;
                                height: 50px;
                                line-height: 50px;
                                text-align: center;
                                /*浮动*/
                                float: left;
                        }
                        
                        li:hover{
                                background-color: darkred;
                        }
                        
                        p{
                                /*清除浮动*/
                                clear: both;
                        }
                </style>
        </head>
        <body>
                <ul>
                        <li>首页</li>
                        <li>家用电器</li>
                        <li>手机数码</li>
                        <li>服饰</li>
                        <li>日用百货</li>
                        <li>美妆</li>
                        <p>这是一个p标签</p>
                </ul>
        </body>
</html>

CSS布局:(重点)

整体布局:div+css 导航条/左右侧菜单: div+ul-li+css 图文混排: div+dl-dt-dd+css 规整表单: form+table 文本水平居中: text-align:center; 文本垂直居中: line-height 模块水平居中: margin:0px auto;配置width属性一起设置. 微调元素位置,首选外边距,其次内边距,最后才会考虑相对定位. 如果一行既有文字又有图片,文字想与图片垂直居中对齐,设置图片的vertical-align: middle;

以上九点是完成一个静态页面的重要要素 ， 如果掌握了这九点要素 ，我相信前端对于你来说是易入反掌 ，

总结

1.div和span标签.(重点) 2.框架集 3.内联框架(重点) 4.特殊符号 5.css概念 6.页面引入css方式.

7.css总语法(重点) 8.css注释 9.8种常用选择器

10.超链接伪类样式4种. 11.常用字体样式5种 12.常用文本样式5种 13.常用背景样式3种 14.常用列表样式4种 15.扩展display,overflow 16.盒子模型 17.定位四种 18.浮动和清除浮动

参考文档：

具体参考文档

座右铭

万丈高楼平地起，多点技术，多粒米。

联系方式

感谢您阅读我的博客！如果您对其中的内容有任何疑问、想法或意见，欢迎在评论区留言或通过上述联系方式与我交流。

avatar
文章
阅读
粉丝