zoukankan html css js c++ java

认识CSS的第一天

---------------------不定时的更新又又开始了，且更且珍惜------------------------

我要每次都写一遍：前面的还没补完，以此催促不定时更新的我
------------------------------------------------------------------------------------------------

认识CSS

1、什么是CSS
　　CSS（Cascading Style Sheet）：层叠样式表

2、作用：
　　定义如何显示HTML元素。
　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

3、注释：

　　在学习一门语言之前我们要先了解其注释的格式
　　/*单行注释*/

　　多行注释

　　
4、语法结构：
　　选择器 {属性：属性值；属性：属性值；属性：属性值}

　　属其对应属性值，可以是有一个也可以有多个

5、三种引入方式

　　1.head内style内部之间书写CSS代码　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {color:burlywood}
    </style>

</head>
<body>
<p>这是一个(*╹▽╹*)p标签</p>

</body>
</html>

方式一

　　2.link标签引入外部CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /*方式二：*/
    <link rel="stylesheet" href="mycss.css">

</head>
<body>
<!--<p>这是一个(*╹▽╹*)p标签</p>-->
</body>
</html>

方式二

　　3.直接在标签内通过style属性属性CSS样式

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

</head>
<body>
<!--方式三：-->
<p style="color:skyblue">这是一个(*╹▽╹*)p标签</p>
</body>
</html>

方式三

ps:注意页面css样式通常都应该写在单独的css文件中

学习CSS的流程

1、首先学习如何查找标签（方式）

　　基本选择器
　　　　标签选择器
　　　　id选择器
　　　　类选择器
　　　　通用选择器
　　组合选择器
　　　　后代选择器
　　　　儿子选择器
　　　　毗邻选择器
　　　　弟弟选择器
　　属性选择器
　　伪类选择器
　　伪元素选择器

2、如何给查找到的标签设置样式

基本选择器：

　　　　　　标签选择器　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器：可以把我们某个标签变成同样的格式*/
        /*比如：所有span标签的颜色都是红色*/
        span {color:red}

    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>

标签选择器

　　　　　　id选择器

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

        /*id选择器，通过id来选择
        /*比如我们将所有id为s1的字体大小改成24px*/
        #s1 {
        font-size: 24px;
        }


        }
    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>

id选择器

　　　　　　类选择器

　　　　　　　　注意：样式类名不要用数字开头（有的浏览器不认）。

　　　　　　　　　　　标签中的class属性如果有多个，要用空格分隔。

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

        /*类选择器，通过类来选择*/
        .c1 {
            color:brown;
        }

    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>

类选择器

　　　　　　通用选择器（有点类似于sql语句中select*，就不指定条件）

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

        /* *：通用选择器，将所有的都变成统一的样式，用的较少*/
        * {
            color:dodgerblue;
        }

    </style>
</head>
<body>
<span id="s1">span</span>
<div class="c1">div
    <p>p
        <span>span</span>
    </p>
</div>
<div class="c1">div</div>
</body>
</html>

通用选择器

组合选择器：

　　　　　　后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器  div里面所有的span标签变成蓝色，子子孙孙都变*/
        div span{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<span>这是div上面的span♡</span>
<div>
    <span>这是div里面的第一个span♡</span>
    <p>这是div里面的第一个p❤
        <span>这是div里面的第一个p里面的span♡</span>
    </p>
    <span>这是div里面的第二个span♡</span>
</div>
<span>这是div下面的第一个span♡</span>
<span>这是div下面的第二个span♡</span>
</body>
</html>

后代选择器

　　　　　　儿子选择器　　　　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*儿子选择器*/
        div>span{
            color:firebrick;
        }
    </style>
</head>
<body>
<span>这是div上面的span♡</span>
<div>
    <span>这是div里面的第一个span♡</span>
    <p>这是div里面的第一个p❤
        <span>这是div里面的第一个p里面的span♡</span>
    </p>
    <span>这是div里面的第二个span♡</span>
</div>
<span>这是div下面的第一个span♡</span>
<span>这是div下面的第二个span♡</span>
</body>
</html>

儿子选择器

　　　　　　毗邻选择器　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*毗邻选择器  对下不对上*/
        div+span {
            color: chocolate;
        }
    </style>
</head>
<body>
<span>这是div上面的span♡</span>
<div>
    <span>这是div里面的第一个span♡</span>
    <p>这是div里面的第一个p❤
        <span>这是div里面的第一个p里面的span♡</span>
    </p>
    <span>这是div里面的第二个span♡</span>
</div>
<span>这是div下面的第一个span♡</span>
<span>这是div下面的第二个span♡</span>
</body>
</html>

毗邻选择器

　　　　　　弟弟选择器　　　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*弟弟选择器  对下不对上*/
        div~span {
            color: lightsalmon;
        }
    </style>
</head>
<body>
<span>这是div上面的span♡</span>
<div>
    <span>这是div里面的第一个span♡</span>
    <p>这是div里面的第一个p❤
        <span>这是div里面的第一个p里面的span♡</span>
    </p>
    <span>这是div里面的第二个span♡</span>
</div>
<span>这是div下面的第一个span♡</span>
<span>这是div下面的第二个span♡</span>
</body>
</html>

弟弟选择器

属性选择器：

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

        [xxx] {
            color: lightpink;
        }

    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>这个只有属性名</p>
<p xxx="1">这个有属性名和属性值并且值为1</p>
<p xxx="2">这个有属性名和属性值并且值为2</p>
</body>
</html>

[xxx]属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只要标签有属性名为xxx并且值为1*/
        [xxx='1'] {
            color: mediumpurple;
        }

    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>这个只有属性名</p>
<p xxx="1">这个有属性名和属性值并且值为1</p>
<p xxx="2">这个有属性名和属性值并且值为2</p>
</body>
</html>

[xxx='1']

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*规定p标签内部必须有属性名为xxx并且值为2的标签*/
        p[xxx='2'] {
            color:lightgreen;
        }
    </style>
</head>
<body>
<span xxx="2">span</span>
<p xxx>这个只有属性名</p>
<p xxx="1">这个有属性名和属性值并且值为1</p>
<p xxx="2">这个有属性名和属性值并且值为2</p>
</body>
</html>

p[xxx='2']

注：属性名不用加引号属性值要加

分组与嵌套：

　　　　分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，

　　　　　　　我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*分组*/
        div,p,span {
            color:aquamarine;
        }
    </style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>

</body>
</html>

分组

　　　　
　　　　上面的代码为div标签，p标签，span标签统一设置字体为湖水绿。

　　　　嵌套：不同的选择器可以共用一个样式

后代选择器与标签组合

　　　　多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 未访问的链接 */
        a:link {
            color:red;
        }
        /* 鼠标移动到链接上 */
        a:hover {
            color: palevioletred;
        }
        /* 选定的链接 */
        a:active {
            color:pink;
        }
        /* 已访问的链接 */
        a:visited{
            color: lightpink;
        }
        input:focus {
            outline: none;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑话网</a>
<a href="http://www.sogo.com">搜狗</a>
<input type="text">
</body>
</html>

伪类选择器示例

伪元素选择器

　　　　first-letter: 常用来给首字母特殊样式

　　　　before: 在每个<p>元素之前插入内容

　　　　after: 在每个<p>元素之后插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        first-letter {
            color:red;
            font-size: 24px;
        }
        p:before {
            content: '*';
            color:gold;
        }
        p:after {
            content: '?';
            color:deeppink;
            font-size: 48px;
        }
    </style>
</head>
<body>
<p>告诉我  答案是什么</p>
<p>你喜欢去哪</p>
<p>青海或三亚</p>
<p>冰岛或希腊</p>
<p>南美不去吗</p>
<p>沙漠你爱吗</p>
<p>我问太多了</p>
</body>
</html>

3、选择器优先级

　　相同选择器不同的引入方式：

　　　　就进原则谁越靠近标签谁说了算

　　　　　　
　　不同选择器相同的引入方式：

　　　行内样式 > id选择器> 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            color:gold;
        }
        .c1 {
            color: antiquewhite;
        }
        p {
            color: darkslateblue;
        }
    </style>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: skyblue">p</p>
</body>
</html>

代码示例

4、样式修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 100px;
        }
        p {
            font-family:"Sitka Banner","Arial",sans-serif;
        }
        p {
            font-size:16px;
            font-weight: lighter;
        }
    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>就算失望，不能绝望</p>
</body>
</html>

示例

　　　　如果设置成inherit表示继承父元素的字体大小值

文本颜色

　　颜色属性被用来设置文字的颜色。

　　颜色是通过CSS最经常的指定：

　　　　　十六进制值 - 如: ＃FF0000

　　　　　一个RGB值 - 如: RGB(255,0,0)

　　　　　颜色的名称 - 如: red

　　　　　还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*!*方式一：*!*/
            /*color:red;*/

            /*!*方式二：*!*/
            /*color:rgb(0,0,255);*/

            /*!*方式三：*!*/
            /*color:#ff6700;*/

            /*方式四：*/
            color:rgba(0,0,255,0.4);
        }
    </style>
</head>
<body>
<p>不要害怕自己长成生活的模样</p>
</body>
</html>

文本颜色

文本属性

　　　　文字对齐

　　　　　　　　text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

　　　　文字装饰

　　　　　　　　text-decoration 属性用来给文字添加特殊效果。

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

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

　　　　　　　　　　a {
  　　　　　　　　　　　text-decoration: none;
　　　　　　　　　　}

　　　　首行缩进

　　　　　　　　将段落的第一行缩进 32像素：

　　　　　　　　　　p {
 　　　　　　　　　　 text-indent: 32px;
　　　　　　　　　　}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: right;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            text-indent: 48px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<p>走过了人来人往</p>
<a href="https://www.baidu.com">百度</a>
</body>
</html>

文本属性示例

背景属性

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

　　　支持简写：

　　　　　　background:#336699 url('1.png') no-repeat left top;

　　　使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            /*background-color: tomato;*/
            /*background-image:url("timg.jpg") ;*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center;*/

            /*简写(顺序没有限制，空格隔开)*/
            background: no-repeat center url("timg.jpg") tomato;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

背景属性示例

背景图片

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

支持简写：

background:#336699 url('1.png') no-repeat left top;

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

interesting：（感动吗？）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: lightskyblue;
        }
        .box {
            height: 400px;
            background: url("timg.jpg");
            background-attachment: fixed;
        }
        .c2 {
            height: 400px;
            background-color: lightgreen;
        }
        .c3 {
            height: 400px;
            background-color: lightcyan;
        }
        .c3 {
            height: 400px;
            background-color: peachpuff;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

图片不动

边框

　　　　　　边框属性：

　　　　　　　　　　border-width

　　　　　　　　　　border-style

　　　　　　　　　　border-color

　　　　　　边框样式

值	描述
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;
　　　　　　　　　　}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            /*border- 3px;*/
            /*border-style: dashed;*/
            /*border-color: antiquewhite;*/

            /*简写*/
            border: 3px solid red;
        }
    </style>
</head>
<body>
<div>div</div>
</body>
</html>

边框示例

画圆

　　　　　　用这个属性能实现圆角边框的效果。

　　　　　　将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: peachpuff;
            border: 3px solid paleturquoise;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

画圆示例

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: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

　　　　　　　　　　也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
            /*display: none;*/
        /*}*/
        /*!*inline将块级标签变成行内标签*!*/
        /*div {*/
            /*display: inline;*/
        /*}*/
        /*span {*/
            /*display: block;*/
        /*}*/
        /*!*将选择的标签既具有行内标签的特点又有块级标签的特点*!*/
        span {
            display: inline-block;
            height: 400px;
            width: 400px;
            background-color: powderblue;
            border: 3px solid palegreen;
        }
    </style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>

display示例

查看全文

相关阅读:
UPD通信
 异常处理
 网络编程-套接字(socket)
数据分析（一）
爬虫存储库之mongodb数据库（四）
爬虫请求库selenium（三）
爬虫解析库beautifulsoup（二）
爬虫简介与request库（一）
flask框架数据库之SQLAlchemy
flask框架（四）

原文地址：https://www.cnblogs.com/yangyinyin/p/10946464.html