CSS基础

CSS介绍

简介：CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

语法：每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

h1{color:red;font-size:14px;}

注释

/*css注释*/

CSS的三种引入方式

行内样式:行内式是在标记的style属性中设定CSS样式

<p style="color: red">Hello world.</p>

内部样式:嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式:外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可

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

CSS选择器

基本选择器：元素选择器、ID选择器、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <link rel="stylesheet" href="./02.css">
</head>
<body>
<div>div标签1</div>
<div id="d2">dic标签2</div>

<p class="c1">p标签</p>
<span class="c1">span标签</span>

<span>span2标签2号</span>
</body>
</html>

View Code

/*基本选择器*/
/*元素选择器*/
p{
    color:green;
}
/*ID选择器*/
#d2{
    color: yellow;
}
/*类选择器*/
.c1{
    color: blue;
}
/*通用选择器*/
* {
    color: deeppink;
}

组合选择器：后代选择器、儿子选择器、毗邻选择器、弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css组合选择器</title>
    <style>
        /*后代选择器 */
        div a{
            color: red;
        }
        /*儿子选择器*/
        div>a{
            color: green;
        }
        /*毗邻选择器*/
        a+span{
            color:blue;
        }
        /*弟弟选择器*/
        a~span{
            color:chocolate;
        }
    </style>
</head>
<body>
<div id="d1" class="c1">
    <p>
        <a>孙子a标签</a>
    </p>
    <span>儿子a前面的span标签</span>
    <a>儿子a标签</a>
    <span>儿子a后面的span标签1</span>
    <span>span标签1后面的span标签2</span>
</div>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性选择器*/
        [na]{
            color:red;
        }
        [na="lary"]{
            color: blue;
        }

    </style>
</head>
<body>

<div>
    <p>div中p标签</p>
</div>

<div na>111</div>
<div na="lary">222</div>
<div id="d3">333</div>
<p>第一个p标签</p>
<p>第二个p标签</p>

</body>
</html>

分组和嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*分组和嵌套*/
        /*分组*/
        #d3,
        p{
            color:pink;
        }
        /*嵌套*/
        div p{
            color: aqua;
        }

    </style>
</head>
<body>

<div>
    <p>div中p标签</p>
</div>

<div na>111</div>
<div na="lary">222</div>
<div id="d3">333</div>
<p>第一个p标签</p>
<p>第二个p标签</p>

</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素选择器</title>
    <style>
        /*伪类选择器*/
        /*未访问的链接*/
        a:link {
            color: green;
        }

        /*已访问的链接*/
        a:visited {
            color: black;
        }

        /*鼠标移动到链接上*/
        a:hover {
            color: pink;
        }

        /*选定的链接*/
        a:active {
            color: chocolate;
        }

        /*input输入框获取焦点时样式*/
        input:focus {
            outline: none;
            background-color: pink;
        }
    </style>
</head>
<body>

<a href="http://baidu.com" target="_blank">baidu</a>
<a href="http://sogou.com" target="_blank">sogou</a>

<div id="d1">div</div>

<input type="text">

<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>

</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类和伪元素选择器</title>
    <style>
        /*伪元素选择器*/

        /*给首字母设置特殊样式*/
        p:first-letter {
            font-size: 48px;
            color: blue;
        }

        /*在每个元素之前插入内容*/
        p:before {
            content: "Y";
            color: red;
        }

        /*在每个元素之后插入内容*/
        P:after {
            content: "+";
            color: pink;
        }
    </style>
</head>
<body>

<a href="http://baidu.com" target="_blank">baidu</a>
<a href="http://sogou.com" target="_blank">sogou</a>

<div id="d1">div</div>

<input type="text">

<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>
<p>I know that the spades are swords of a soldier，I know that the clubs are weapons of war</p>

</body>
</html>

first-letter伪元素生效的前提：
1. 首先，元素的display计算值必须是 block, inline-block, table-cell, list-item或者table-caption，其他所有display计算值都没有用，包括display:table以及display:flex等
2. 然后，不是所有的字符都能单独作为::first-letter伪元素存在的
“赠品字符”包括：·@#%&*()（）[]【】{}:："“”;；'‘’》《,，.。？?!！…*、/。
正常直接可以作为伪元素的字符就是数字，英文字母，中文以及$以及一些运算符以及非常容易忽视的空格等。这里空格有必要再加粗强调下，很容易忽视的一个字符。
3. 最后，字符前面不能有图片或者inline-table之类的元素存在

View Code

选择器的优先级

a.继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0,我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式

CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等

b.按照不同选择器的权重来决定的，具体的选择器权重计算方式：内联样式（1000） id选择器（100）类选择器（10）元素选择器(1)

c.可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护

CSS属性

字体属性

font_family:font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值

font_size:字体大小

font_weight:设置字体的字重（粗细）

值              描述
normal    默认值，标准粗细
bold            粗体
bolder    更粗
lighter    更细
100~900    设置具体粗细，400等同于normal，而700等同于bold
inherit    继承父元素字体的粗细值

View Code

color:文本颜色

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如:  red
rgba(255,0,0,0.3) 第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间

View Code

文字属性

文字对齐：text-align

left    左边对齐 默认值
right    右对齐
center    居中对齐
justify    两端对齐
text-decoration 属性用来给文字添加特殊效果。

View Code

文字装饰：text-decoration

none    默认。定义标准的文本。
underline    定义文本下的一条线。
overline    定义文本上的一条线。
line-through    定义穿过文本下的一条线。
inherit    继承父元素的text-decoration属性的值

View Code

常用的为去掉a标签默认的自划线

a {
 text-decoration: none;
}

首行缩进

p {
  text-indent: 32px;
}

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top（20px 20px）;
支持简写：background:#ffffff url('1.png') no-repeat right top;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体和文本属性/背景属性</title>
    <style>
        /*文本属性*/
        #p1 {
            text-align: justify;
            text-decoration: underline;
            text-indent: 8px;
        }

        a {
            text-decoration: none;
        }
        /*背景属性*/
        div{
            height: 60px;
            width: 60px;
            background-color: red;
        }
        .c1{
            height:50px;
            width: 100%;
            background-color: red;
        }
        .c2{
            height:500px;
            width: 100%;
            background:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=214218730,1193798969&fm=27&gp=0.jpg")no-repeat fixed center center; ;
        }
        .c3{
            height:50px;
            width:100%;
            background-color: blue;
        }
    </style>
</head>
<body>
<p style="font-weight: 100"> He deals the cards as a meditation And those he plays never suspect He doesn't play for the money he wins</p>
<p>He deals the cards as a meditation</p>
<p style="font-weight: 900">He deals the cards as a meditation</p>
<p id="p1">The sacred geometry of chance
The hidden loaw of a probable outcome
The numbers lead a dance
I know that the spades are swords of a soldier
I know that the clubs are weapons of war
I know that diamonds mean money for this art
But that's not the shape of my heart
He may play the jack of diamonds
</p>

<a href="http://www.sogo.com">sogo</a>

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

View Code

边框

边框属性：border-width/border-style/border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

/*简写方式*/
#i1 {
  border: 2px solid red;
}

/*边框样式*/
none    无边框。
dotted    点状虚线边框。
dashed    矩形虚线边框。
solid    实线边框

除了可以统一设置边框外还可以单独为某一个边框设置样式
#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

将border-radius设置为长或高的一半即可得到一个圆形，用这个属性能实现圆角边框的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
</head>
<style>
div{
    width:300px;
    height:300px;
    background-image: url("u=2440280711,976291983&fm=27&gp=0.jpg");
    background-position: center;
    /*background-color: red;*/
    /*border-style:solid;*/
    /*border-color: green;*/
    /*border- 5px;*/
    /*border:5px none green;*/
    /*border-right:5px solid green;*/
    border-radius: 150px;
}
</style>
<body>
<div></div>
</body>
</html>

View Code

display属性

用于控制HTML元素的显示效果

display:"none"        HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"        默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"    按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"    使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        div{
            background-color: red;
            width:1000px;
            display: inline;
            visibility: hidden;
        }
        a{
            display: block;
            /*visibility: hidden;*/
            width: 1000px;
        }
    </style>
</head>
<body>
<div>div</div>
<a href="">a1</a>
<a href="">a2</a>
<div>div2</div>
</body>
</html>

View Code

css盒子模型

margin:控制元素与元素之间的距离
padding:控制内容与边框之间的距离
border:围绕在内边距和内容外的边框
content:盒子的内容，显示文本和图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
    <style>
        .c1 {
            height: 200px;
            width: 200px;
            background-color: red;
            /*padding-top: 5px;*/
            /*padding-right: 10px;*/
            /*padding-bottom: 15px;*/
            /*padding-left: 20px;*/

            /*同时设置多个值 推荐使用简写*/
            /*padding: 5px 10px 15px 20px; !*上 右  下 左*!*/
            /*padding: 5px 10px 20px;  !* 上 左右 下*!*/
            /*padding: 10px 20px; !*上下 左右*!*/
            padding: 20px; /*上下左右*/
            border: 10px solid black;

        }

        .margin-test {
            margin-top: 5px;
            margin-right: 10px;
            margin-bottom: 15px;
            margin-left: 20px;
        }

        /*常见居中*/
        .mycenter{
            margin:0 auto
        }
        button {
            border: 10px solid pink;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="c1 margin-test"></div>
<div class="c2 mycenter"></div>
<button>按钮</button>
</body>
</html>

View Code

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

/*简写*/
.margin-test {
  margin: 5px 10px 15px 20px;
}

/*常见居中*/
.mycenter {
  margin: 0 auto;
}

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

/*简写*/
.padding-test {
  padding: 5px 10px 15px 20px;
}

float属性

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

.f1{
float:left
}
.f2{
float:right
}
.f3{
float:none
}

clear属性

clear属性规定元素的哪一侧不允许其他浮动元素,clear属性只会对自身起作用，而不会影响其他元素

left    在左侧不允许浮动元素。
right    在右侧不允许浮动元素。
both    在左右两侧均不允许浮动元素。
none    默认值。允许浮动元素出现在两侧。
inherit    规定应该从父元素继承 clear 属性的值。

/*解决父标签塌陷*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性</title>
    <style>
        *{
            margin: 0;
        }
        .nav{
            background-color: lavenderblush;
        }
        .clearfix:after{
            content: "";
            display:block;
            clear:left;
        }
        .container{
            width:1028px;
            margin: 0 auto;
        }
        ul a{
            color:blue;
            text-decoration: none;
        }
        ul a:hover{
            color:green;
        }
        ul.nav-left>li{
            float: left;
            padding: 15px;
        }
        ul.nav-right>li{
            float:right;
            padding: 15px;
        }
    </style>
</head>
<body>
<div class="nav clearfix" >
    <div class="container clearfix">
        <ul class="nav-left" type=none>
            <li><a href="">玉米</a></li>
            <li><a href="">大米</a></li>
            <li><a href="">小米</a></li>
            <li><a href="">黑米</a></li>
            <li><a href="">红米</a></li>
        </ul>

        <ul class="nav-right" type=none>
            <li><a href="">购物车</a></li>
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
        </ul>
    </div>
</div>
<div></div>
</body>
</html>

float示例

overflow溢出属性

　　overflow（水平和垂直均设置）

　　overflow-x（设置水平方向）

　　overflow-y（设置垂直方向）

visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden    内容会被修剪，并且其余内容是不可见的。
scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="./blog.css">
</head>
<body>
<!--左边开始-->
<div class="left">
    <!--博客图片-->
    <div class="header-img">
        <img src="./u=2440280711,976291983&fm=27&gp=0.jpg" alt="">
    </div>
    <!--名称-->
    <h3 class="blog-name">LART BLOG</h3>
    <!--备注-->
    <div class="introduce">
        <p>BUT DO NOT ASK FOR A GOOD FUTURE</p>
    </div>
    <!--链接1-->
    <ul class="blog-links">
        <li><a href="">about the author</a></li>
        <li><a href="">WeChat</a></li>
        <li><a href="">Weibo</a></li>
    </ul>
    <!--链接2-->
    <ul class="blog-tags">
        <li><a href="">HTML</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">JavaScript</a></li>
    </ul>

</div>
<!--左边结束-->

<!--右边开始-->
<div class="right">
    <!--文章列表开始-->
    <div class="article-list">

        <!--文章1开始-->
        <div class="article">
            <!--标题栏-->
            <div class="head">
                <h1 class="article-title">Jane Eyre</h1>
                <span class="article-date">2018-3-10</span>
            </div>
            <!--内容栏-->
            <div class="content">
                This is a strong romantic colour realistic novel, mainly describes the novels of Jane love and the love of rochester
            </div>
            <!--标签栏-->
            <div class="tag-list">
                <span>literature</span>
                <span>love</span>
            </div>
        </div>
        <!--文章1结束-->

         <!--文章1开始-->
        <div class="article">
            <!--标题栏-->
            <div class="head">
                <h1 class="article-title">Jane Eyre</h1>
                <span class="article-date">2018-3-10</span>
            </div>
            <!--内容栏-->
            <div class="content">
                This is a strong romantic colour realistic novel, mainly describes the novels of Jane love and the love of rochester
            </div>
            <!--标签栏-->
            <div class="tag-list">
                <span>literature</span>
                <span>love</span>
            </div>
        </div>
        <!--文章1结束-->

         <!--文章1开始-->
        <div class="article">
            <!--标题栏-->
            <div class="head">
                <h1 class="article-title">Jane Eyre</h1>
                <span class="article-date">2018-3-10</span>
            </div>
            <!--内容栏-->
            <div class="content">
                This is a strong romantic colour realistic novel, mainly describes the novels of Jane love and the love of rochester
            </div>
            <!--标签栏-->
            <div class="tag-list">
                <span>literature</span>
                <span>love</span>
            </div>
        </div>
        <!--文章1结束-->



    </div>
    <!--文章列表结束-->
</div>
<!--右边结束-->
</body>
</html>

blog.html

/*
blog页面的css样式
 */

/*通用样式*/
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/*左边样式*/
.left {
    width: 20%;
    float: left;
    background-color: #4d4d4d;
    height: 100%;
    position: fixed;
    bottom: 0
}

/*头像*/
.header-img {
    width: 150px;
    height: 150px;
    /*border: 3px solid #5c320b;*/
    border-radius: 100%;
    overflow: hidden;
    margin: 15px auto;
}

.header-img > img {
    max-width: 135%;
}

.blog-name,
.introduce,
.blog-links,
.blog-tags{
    text-align: center;
    color: rosybrown;
}

.introduce{
    margin-top: 20px;
}
.blog-links a,
.blog-tags a{
    color:black;
}

.blog-links a:hover,
.blog-tags a:hover{
    color: white;
}
.blog-links,
.blog-tags{
    margin-top: 25px;
}
/*右边的样式*/
.right{
    width: 80%;
    float: right;
    background-color: #eeeeee;
}

.article-list{
    width:85%;
    margin-left: 20px;
}

.head{
    border-left: 5px solid red;
    padding: 15px;
}
.article-date {
    float: right;
}
.article-title{
    display: inline-block;
}
.article{
    background-color: white;
    margin-bottom: 20px;
}
.content,
.tag-list{
    margin-top:20px;
}
.content{
    padding: 15px;
}
.tag-list{
    margin-left: 15px;
    padding: 15px 15px 15px 0;
    border-top:1px solid #4d4d4d;
}
.tag-list span:before{
    content: "#";
}

blog.css