前端基础——CSS

一、CSS样式引入方式

　　 1.内联式：

<p style="color: blue">CSS样式</p>

　　2.嵌入式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        p{color: red;}
    </style>
</head>
<body>
    <p>CSS样式</p>
</body>
</html>

　　3.外部式：

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

　　一般而言，遵循就近原则：上述序号：1 > 2 >3（权值相同情况下，将在后续介绍权值）

二、CSS选择器

　　格式：　　

选择器{
    样式；
}

　　1.标签选择器：按标签名称选择——标签名{}

　　　　p{
            color: red;
        }

　　2.类选择器：根据class类名进行选择—— .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        .teststyle{
            color: blue;
        }
    </style>
</head>
<body>
    <p class="teststyle">CSS样式</p>
</body>
</html>

　　3.ID选择器：根据id选择——#{id名}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style type="text/css">
        #teststyle{
            color: green;
        }
    </style>
</head>
<body>
    <p id="teststyle">CSS样式</p>
</body>
</html>

　　4.子选择器：选择第一代子类元素——使用 >

.first>span{
    border:1px solid red;
}

　　5.后代选择器：选择所有后代，而非第4点中的直接后代——使用空格

.first span{
　　color:red;
}

　　6.通用选择器：选择所有元素——使用 *

* {
　　color:red;
}

　　7.伪类元素选择器：这里介绍比较通用的a标签的4个伪类

link 未访问（默认） hover 鼠标悬停（鼠标划过） active 链接激活（鼠标按下） visited 访问过后（点击过后）

　　8.分组选择器：同时选择多个选择器——使用 ,

三、继承、层叠与其它特性

　　1.继承

　　某些样式具有继承性，例如下面的p标签中样式同样适用与span标签，但注意不是所有样式都能继承，例如border:

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

　　2.权值

1,内联样式表的权值为1000;
2,ID选择器的权值为100;
3,Class类选择器,伪类选择器的权值为10;
4,HTML标签选择器,伪元素的权值为1;

　　//可以将继承的权值理解为0.1，也就是非常低

　　这样，当同一元素遇到不同样式时，就根据权值高低进行加载

　　3.层叠

　　多个相同权值的样式，按照先后样式加载，后出现的将会覆盖前面出现的。

四、格式化排版　　

　　1.文字排版：字体——通过font-family实现

<style type="text/css">
    body{
        font-family:"微软雅黑";
    }
    
</style>

　　2.文字排版：字号与颜色——通过font-size和color实现

body{
　　font-size:12px;
　　color:#666;
}

　　3.文字排版：粗体——通过font-weight实现；斜体——通过font-style实现

p span{
　　font-weight:bold;
}

a {
    font-style:italic;    
}

　　4.文字排版：下划线——通过text-decoration实现

p a{
　　text-decoration:underline;
}

　　5.文字排版：删除线——通过text-decoratio实现

.oldPrice{
　　text-decoration:line-through;
}

　　6.段落排版：缩进——通过text-indent实现

    p{
        text-indent:2em;
    }

　　7.段落排版：行高——通过line-height实现

p{
    line-height:2em;
}

　　8.段落排版：文字间距——通过letter-spacing和 word-spacing 实现

h1{
    letter-spacing:50px;
}

　　9.段落排版：对齐——通过text-align实现（针对块级元素，块级元素下文讲解）

div{
    text-align:center;
}

　　//当然不止文本，块级元素中的内容包括图片等都是可以居中的

五、盒子模型

　　1.元素分类——块级元素，内联元素（行内元素），内联块级元素

　　常见块级元素：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

　　常见行内元素：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

　　常见行内块级元素：

<img>、<input>

　　2.块级元素

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　//可以通过display:block将行内元素设置为块级元素

　　3.行内元素

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。（自己撑开来的）

　　//可以通过display:inline将元素设置为行内元素

　　4.行内块级元素

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

　　//可以通过display:inline-block将元素设置为行内块级元素

　　5.盒子内外边距

　　内边距：padding　　外边距：margin

　　内外边距都分为4个方向，元素的实际宽高也应当加上边距的长度

　　6.边框——通过border实现

p{
    border:2px dotted #ccc;
}

　　//可以拆分 border-width:2px; border-style:solid;border-color:red;

　　若要单独设置某一边框，可以使用border-bottom等结合方向实现

li{
    border-bottom:1px dotted #ccc;
}

　　7.宽度和高度——通过width和height实现

li{
    border-bottom:1px dotted #ccc;
    width:200px;
    height:30px;
}

　　8.填充——通过padding实现

　　一共4个方向，为顺时针方向！若只写一个，则4个方向相同；只写两个，则为上下左右两组

　　9.边界——通过margin实现

　　方向与第8点类同

#box1{
    margin-bottom:30px;
}

六、布局模型

　　1.分类——浮动模型（float），流动模型（Flow），层模型（Layer）

　　2.流动模型

　　块级元素垂直流动，行内元素水平流动

　　3.浮动模型

　　可以实现块级元素并排显示的效果（之前说过，默认情况下，块级元素独占一行）

div{
    border:2px red solid;
    width:200px;
    height:400px;
    float:left;
}

　　4.层模型　

　　层模型有三种形式：

　　　　1、绝对定位(position: absolute)

　　利用position:absolute;开始绝对定位

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    top:20px;
    right:100px;
    
}

　　　　2、相对定位(position: relative)

　　相对的是原先的位置进行定位

　　　　3、固定定位(position: fixed)

　　但是呢，由于此布局方式不够灵活，不被广泛使用！

　　【补充】

　　　　颜色设置，推荐使用十六进制：http://www.sioe.cn/yingyong/yanse-rgb-16/

　　　　 长度设置：px与百分比

七、实用小技巧

　　1.行内元素水平居中——通过给父元素加text-align：center属性实现

　　 一般给文本与图片居中可以使用此方式：

div{
    border:1px solid red;
    margin:20px;
    text-align:center;
}
.txtCenter{
    text-align:center;
}

　　2.定宽块级元素居中——通过margin的auto属性

div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

　　3.不定宽块级元素居中——设置display为inline然后使用第1点方式（丢失块级元素特性）

.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}

　　4.父元素高度确定的单行文本——通过设置该元素的height和line-hieght来实现

.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}

posted @ 2017-09-04 15:45 ---江北阅读(234) 评论(0) 编辑收藏举报

刷新页面返回顶部

---江北

冰冻三尺，非一日之寒

前端基础——CSS

公告