CSS 基础

前端

CSS 介绍

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。

存在方式有三种：标签嵌入、页面嵌入和外部样式文件嵌入

标签嵌入

将要赋予某个标签样式的css代码写在标签里面.style属性定义标签的样式,所有的样式都写在style属性里面.

<div style="background-color: red;border: 1px solid green;">测试</div>

页面嵌入

统一写在页面的head部分,用style标签包裹,这样是不是不会那么散乱了呢? 但是问题就来了,我写这这,我怎么应用到我想要的那个标签或者元素上呢?

在后面一小节就开始讲选择器,通过选择器来找到那个它(你心所想的那个标签).

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

    <!--在head里面统一写css样式,页面嵌入得css样式都包裹在style标签里面-->
    <style type="text/css">
        div{
            background-color: red;
            border: 1px solid green;
        }
    </style>

</head>
<body>
    <div>测试</div>
</body>
</html>

外部样式文件嵌入

当页面内容写的多了,样式也随之增多,你回发现在head上一大长串,到最后如果要修改单独某个样式其实也不好找,那么我们可不可以将样式像网站目录那样分门别类的文件呢?

只要创建一个.css的文件,然后将css样式写在里面就可以了.下面是应用方法:
test.css(css样式文件):

div{
    background-color: red;
    border: 1px solid green;
}

test.html(html页面):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <!--外部样式文件引入-->
    <link rel="stylesheet" href="test.css" />
</head>
<body>
    <div>测试</div>
</body>
</html>

优先级： 标签>页面>外部，这个仅限同样的样式冲突是才有用,如果真遇到冲突了,你一定要使用某个样式,你可以在那个冲突的样式后面加上!important

.hide{
    display: none!important;
}

选择器

有了选择器,我们可以通过各种各样得方式找到页面上的某个元素并给它加上样式,选择器的定义方法如下:

选择器名称{

}

标签选择器

定义标签选择器的时候,这个选择器的名称以你要定义的标签的名称命名,那么所有的这个标签都会加上这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*定义标签选择器,这个标签选择器名称要和标签的名称一样,在"{}"里面写样式代码,会让所有"div"标签应用上我这里写的样式*/
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <!--这里有div标签,那么他就会自动应用上上面定义的css样式-->
    <div>测试</div>
</body>

属性选择器

每一个标签上都还有或多或少的属性,有的是内部语法用来定义这个标签展示效果的,有的是程序员自己加的,为了帮助实现功能的.

那么属性是什么呢? 摘一段代码:

标签属性

图中圈出来的,用等号连接起来,前面是属性名,后面是属性的值,这就是这个标签的属性了; 红色的是内置语法规定的,蓝色的是我自己写的一个.任何开发者都可以在标签中新增自己的属性,只要按照那种格式写就可以.

属性选择器的用法:
属性用中括号包裹,等号前面是属性名,后面是value,添加多个属性条件直接紧接着在后面写就行了,属性选择和其他条件之间没有空格.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*找到input标签,并且type属性是"text"的,lalbel属性是"姓名"的给它加上背景颜色*/
        input[type='text'][label='姓名']{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form action="http://192.168.11.88:8000/index/" method="post"  enctype="multipart/form-data">
        <input type="text" name="user" label="姓名"/>
        <input type="password" name="pwd" label="密码"/>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

ID 选择器

为具有某个唯一ID的标签设置样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*定义ID选择器,这个选择器名称前面加"#"号,表示这是一个id选择器,后面跟id值,下面会让所有id="test"的标签并应用上我这里写的样式*/
        #test{
            background-color: red;
        }
    </style>
</head>
<body>
    <!--这里给div标签设置一个id,id是唯一的,不可以重复,为了能够证明这个标签的唯一作用,方便找到它.是的,id也是这个标签的属性-->
    <div id="test">测试</div>
</body>
</html>

类选择器

类选择器,定义好后,想用他随时可以拿来用,可以使用很多来实现很漂亮的样式,很灵活方便

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*定义类选择器,这个选择器名称前面加".",表示这是一个类选择器,需要使用这个样式的标签只需要class="test"在他的class属性里面添加上这个类选择器名称,可以应用多个*/
        .backgroud{
            background-color: red;
        }
        .font_size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!--这里给div标签设置一个class属性,在class属性里面加上上面定义的类属选择器名-->
    <div class="backgroud font_size">测试</div>
</body>
</html>

组合选择器

组合选择器就是我们之前所学的所有选择器组合起来使用,选择器之间用空格隔开

递归组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*第一个条件满足之后,就进入到里面然后在里面找第二个条件,如果没有满足的就再进入他的每一个子标签里面找,一级一级往下找,只要有满足这个递归关系就会应用这个样式*/
        .body .bd-head{
            background-color: blue;
            font-size: 24px;
        }
        .body .bd-content{
            background-color: greenyellow;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="bd-head">这是标题</div>
        <div class="bd-content">
            <ul>
                <li>cc1</li>
                <li>cc2</li>
                <li>cc3</li>
            </ul>
        </div>
    </div>
</body>
</html>

并联组合

用逗号将选择条件连接起来,最后哪个满足了谁都会应用上样式,都满足则都应用上.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        /*第一个查找条件是一个递归组合查找,第二个也是递归组合查找,用逗号连接,最后这两个条件不管谁满足了谁就会应用这个样式*/
        .body .bd-head,.body .bd-content{
            background-color: yellow;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="bd-head">
            <ul>
                <li>head1</li>
                <li>head2</li>
                <li>head3</li>
            </ul>
        </div>
        <div class="bd-content">
            <ul>
                <li>cc1</li>
                <li>cc2</li>
                <li>cc3</li>
            </ul>
        </div>
        <!--这个是不满足两个条件的,所以没有样式-->
        <div class="bd-footer">
            <ul>
                <li>footer1</li>
                <li>footer2</li>
                <li>footer3</li>
            </ul>
        </div>
    </div>
</body>
</html>

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法：

selector : pseudo-class {property: value}
属性 描述
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

示例：

<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>

a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

:first-child

<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

:lang

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

css美化网页

学习css实战前,首先先学习两个理论知识,知道css是应用在html标签上的,那么css影响着html的显示效果,同时html也影响着css的效果,不同的标签加上同一个css样式不一定是同样的一个展示效果.html标签分别分为:内联标签(行内标签), 块级标签这两种.

  • 块级标签: 占整行, 可以设置宽度高度
  • 内联标签: 内容有多少占多少, 不能设置宽和高

当然这两种形式也不是绝对的,后面会讲如何让这两种标签互相转换.
最典型的两个案例就是div标签(块级标签)和span标签(内联标签),现在很流行的页面布局方式就是div + css

backgroud-color

设置背景颜色,被标签添加背景颜色.

<div style="background-color: yellow">Hello World</div>

背景颜色

<span style="background-color: yellow;">Hello World</span>

背景颜色

height & width

设置宽和高

<div style="background-color: yellow;width: 200px; height: 200px">Hello World</div>

高&宽

background-image

添加背景图片,如果图片尺寸不够标签尺寸的话,背景图片默认会平铺,

<div style="background-image: url('header.png');width: 500px; height: 700px">Hello World</div>

背景图片

设置为不平铺,只需要加上”background-repeat: no-repeat;”

<div style="background-image: url('header.png'); background-repeat: no-repeat; width: 500px; height: 700px">Hello World</div>

背景图片

background-position

应用场景，在实际的生产环境中咱们在网页上看到的小图片不是一个一个的零散的小图片的，咱们只是看到了大图片的一部分。比如一个大图片，我只让他显示一部分并不全部显示怎么做？

可以这么想：
有一个窗口，你在窗口的一边，只能通过窗口来看外面，你不能动，我们可以通过移动这个窗口来让你看到不同的场景，当然你看到的大小和窗口的大小有关！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .chuangkou{
            /*定义一个图片*/
            background-image: url('logo.png');
            /*定义一个窗口,指定长和宽*/
            height: 20px;
            width: 20px;
            background-repeat: no-repeat;
            background-position: 0px -55px;
        }
    </style>
</head>
<body>
    <div class="chuangkou"></div>
</body>
</html>

原图:
背景图片

实际效果:
背景图片

border

设置边框

<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第一种：线的粗细为1像素，实线、红色-->
<div style="border:1px solid red;height:10px" ></div>
<!--第二种：线的粗细为1像素，点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>
<!--第三种：线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>

边框

边框可以单独的设置一边的边框、上、下、左、右

<!--在右边设置边框，3px、实线、黑色-->
<span style="border-right: 3px solid black">Hello World</span>

边框

display

可以对内联标签和块标签进行转换,还能隐藏标签元素.

<!--display: none将隐藏标签-->
<div style="display: none;">我被隐藏了</div>
<!--display: inline会将块级别标签调为内联标签-->
<div style="background-color:red;display:inline">我变内联了</div>
<!--display: block会将内联标签调为块级别标签-->
<span style="background-color:red;display:block">我变块级了</span>
<!--display: inline-block既可块级又可内联,就是在内联标签的基础上可以设置宽和高-->
<span style="background-color:red;display:inline-block;height: 100px;width: 300px">我既可块级又可内联</span>

Display

cursor

鼠标停浮样式

<div style="cursor:pointer">停放在这里显示小手(pointer)</div>
<div style="cursor:help">停放在这里显示问号(help)</div>
<div style="cursor:wait">停放在这里显示加载(wait)</div>
<div style="cursor:move">停放在这里显示移动(move)</div>
<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

float

浮动,向一个方向靠齐,多用于布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="width: 500px;border: 1px solid red;">
        <!--浮动对齐-->
        <!--这里长和宽，可以用百分比或者直接指定像素来指定-->
        <div style="width: 20%;background-color: aqua;float: left;">f</div>
        <div style="width: 30%;background-color: beige;float: right;">a</div>
        <div style="width: 30%;background-color: beige;float: right;">a</div>
        <!--解除浮动,把浮动拉取下来固定-->
        <div style="clear: both;"></div>
        最后如果不加上这条,他就会跳出父标签,
    </div>
</body>
</html>

浮动

padding

内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .content{
            /*设置内边距*/
            padding: 100px;
            height: 500px;
            width: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="test" style="font-size: 48px; color: red">TEST</div>
    </div>
</body>
</html>

内边距

margin

外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .content{
            height: 500px;
            width: 500px;
            background-color: blue;
        }
        .font{
            color: red;
            font-size: 48px;
            display: inline-block;
            margin-left: 200px;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="content">
            <div class="font">TEST</div>
        </div>
    </div>
</body>
</html>

外边距

position

定位,position的四个属性值：static, fixed, relative, absolute
每个模式都能使用top, bottom, left, right, 这个四个属性来指定位置

1、absolute
单独使用会根据父标签进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .content{
            height: 500px;
            width: 500px;
            background-color: blue;
        }
        .font{
            color: red;
            font-size: 48px;
            display: inline-block;
            position: absolute;
            top: 200px;
            left: 200px;

        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="content">
            <div class="font">TEST</div>
        </div>
    </div>
</body>
</html>

相对定位

2、relative

绝对定位,relative单独使用没有意义,需要和absolute配合使用,他就相当于把absolute之前定位转移到自己身上,那么absolute就不再是根据父标签定位了,而是根据relative的位置来确定自己的位置.

Note: 如果absolute标签的父标签里面有多个relative的标签,那么它向上查找,找到第一个relative就不会再找了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .shell{
            position: relative;
        }
        .content{
            height: 500px;
            width: 500px;
            background-color: blue;
        }
        .font{
            color: red;
            font-size: 48px;
            display: inline-block;
            position: absolute;
            right: 0px;
            top: 0px;

        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="content">
            <div class="font">TEST</div>
        </div>
    </div>
</body>
</html>

绝对定位

3、fixed

fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="height: 2000px;background-color: #ddd;"></div>
    <!--永远跟在窗口右下角,fixed根据窗口进行定位-->
    <div style="position: fixed;bottom: 0px;right: 0px">返回顶部</div>
</body>
</html>

窗口定位

overflow

对超出的内容添加一个滚动条

<!--如果内容超出添加滚动条-->
<div style="height: 300px; width: 200px;overflow: auto">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>

自动添加滚动条

z-index

优先级,浏览器比作桌面,浏览器上的内容比作卡片,那么优先级就是用来比较那张卡片放在上面,哪张卡片放在下面.数字大的放在上面.数字越大,优先级越高.

<div style="width: 100%; height: 50px; position: fixed;top: 0px; background-color: green;z-index: 2;"></div>
<div style="width: 100%; height: 50px; position: fixed;top: 30px; background-color: red;z-index: 1"></div>

层叠优先级

opacity

设置透明度,0~1:1为不透明,0为完全透明.

<div style="width: 100%; height: 50px; position: fixed;top: 0px; background-color: green;z-index: 2;opacity: 0.6"></div>
<div style="width: 100%; height: 50px; position: fixed;top: 30px; background-color: red;z-index: 1"></div>

透明度

本文标题:CSS 基础

文章作者:梁先森

发布时间:2016-09-29, 18:23:09

最后更新:2017-08-02, 14:15:20

原始链接:http://www.liangxiansen.cn/2016/09/29/css/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. CSS 介绍
    1. 1.1. 标签嵌入
    2. 1.2. 页面嵌入
    3. 1.3. 外部样式文件嵌入
  2. 2. 选择器
    1. 2.1. 标签选择器
    2. 2.2. 属性选择器
    3. 2.3. ID 选择器
    4. 2.4. 类选择器
    5. 2.5. 组合选择器
    6. 2.6. 伪类
      1. 2.6.1. 语法：
      2. 2.6.2. 示例：
  3. 3. css美化网页
    1. 3.1. backgroud-color
    2. 3.2. height & width
    3. 3.3. background-image
    4. 3.4. background-position
    5. 3.5. border
    6. 3.6. display
    7. 3.7. cursor
    8. 3.8. float
    9. 3.9. padding
    10. 3.10. margin
    11. 3.11. position
    12. 3.12. overflow
    13. 3.13. z-index
    14. 3.14. opacity
|