zoukankan      html  css  js  c++  java

  • CSS笔记

    1、CSS 概述

    CSS是层叠式样式表。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记语言。直白一点就是用来美化页面的。

    语法规则：

    image


    选择器：浏览器根据"选择器"决定CSS样式影响的HTML元素(标签)。

    属性(property)：是你要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包裹，这样就组成了一个完整的样式声明(declaration)，如 p{color:blue}

    多个声明：如果定义不止一个声明，则需要用分号将每个声明分开。然后最后一条声明的末尾可以不加分号。如 p{color:blue;font-size:30px}

    CSS注释：

    /*注释内容*/

    2、引入CSS样式表

    内嵌式样式表

    内嵌式是将CSS代码集中写在HTML文档的head头部标签之间，并且用style标签定义。

    语法格式如下：

    <head>
    <style type="text/css">
          选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
</head>

    语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

    type="text/CSS" 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

    【示例 2-1】内联式应用

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            /*
                边框的宽度为1像素
                边框的样式为实线
                边框的颜色为红色
            */
            border: 1px solid red;
        }
        span{
            /*
                字体大小为40像素
                字体名称为华文彩云
            */
            font: 40px "华文彩云";
            /* 字体颜色为蓝色 */
            color: blue;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

    执行结果如下：
    image


    行内式样式表

    行内式是通过标签的style属性来设置元素的样式。

    语法格式如下：

    <标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"

    语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

    【示例 2-2】行内式的应用

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>CSS行内式样式表</title>
</head>
<body>
    <P style="color: orangered;font-family: '仿宋';font-size: 30px;">段落标签</P>
    <P style="color: blue;font-family: '仿宋';font-size: 20px;">段落标签</P>
    <P style="color: green;font-family: '仿宋';font-size: 35px;">段落标签</P>
</body>
</html>

    执行结果如下：
    image


    链入式样式表

    链入式是将所有的样式放在一个或多个以 " .CSS" 为扩展名的外部样式表文件中，通过link标签将CSS文件连接到HTML文档中。

    语法格式如下：

    <head>
	<link href="CSS文件路径" type="text/CSS" rel="stylesheet"/>
</head>

    link是单标签，具体描述如下：

    href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
    type：定义所链接文档的类型，在这里需要指定为"text/CSS"，表示链接的外部文件为CSS样式表。
    rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式

    【示例 2-3】链入式的应用

    a.css

    p{
    font: 30px '仿宋';
    margin: 0 auto;
    
}
#a{color: red;}
#b{color: green;}
#c{color: blue;}

    html文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS链入式</title>
    <link href="../style/a.css" type="text/CSS" rel="stylesheet"/>
</head>
<body>
    <p id="a">你好</p>
    <p id="b">你好</p>
    <p id="c">你好</p>
</body>
</html>

    执行结果如下：
    image


    三种样式表总结：

    image

    3、CSS 选择器

    标签选择器

    标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

    语法格式如下：

    标签名{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3
}

    标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

    【示例 3-1】标签选择器的应用

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标签选择器的应用</title>

    <style type="text/CSS">
        p { font: 20px '宋体'; 
            /*text-align:center 居中对齐 */ 
            text-align:center
        }
        div {
            /*边框以 1像素 虚线  蓝色  实现 */
            border: 1px dashed blue;
         }
    </style>
</head>
<body>
    <div>
        <p>登鹳雀楼</p>
    </div>
    <div>
        <p>王之涣</p>
    </div>
    <div>
        <p>白日依山尽，</p>
    </div>
    <div>
        <p>黄河入海流。</p>
    </div>
    <div>
        <p>欲穷千里目，</p>
    </div>
    <div>
        <p>更上一层楼。</p>
    </div>
</body>
</html>

    执行结果如下：

    image


    id 选择器

    id选择器使用 "#" 进行标识，后面紧跟id名，其基本语法格式如下：

    #id名{
  属性1:属性值1;
  属性2:属性值2;
  属性3:属性值3
}

    该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

    【示例 3-2】id选择器的应用

    <!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>id选择器的应用</title>

    <style type="text/CSS">
        p { font: 20px '宋体'; 
            /*text-align:center 居中对齐 */ 
            text-align:center
        }
        div {
            /*边框以 1像素 虚线  蓝色  实现 */
            border: 5px dashed;
         }
        
         #div1{border-color: red;}
         #div2{border-color: yellow;}
         #div3{border-color: blue;}
         #div4{border-color: green;}
         #div5{border-color: orange;}
         #div6{border-color: purple;}

    </style>
</head>

<body>
    <div id="div1">
        <p>登鹳雀楼</p>
    </div>
    <div id="div2">
        <p>王之涣</p>
    </div>
    <div id="div3">
        <p>白日依山尽，</p>
    </div>
    <div id="div4">
        <p>黄河入海流。</p>
    </div>
    <div id="div5">
        <p>欲穷千里目，</p>
    </div>
    <div id="div6">
        <p>更上一层楼。</p>
    </div>
</body>

</html>

    执行结果如下：
    image


    类选择器

    语法格式如下：

    .类名{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3
}

    该语法中，类名即为HTML元素的class属性值。

    id选择器和类选择器区别：

    • W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
    • 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜。
    • id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
    • id选择器和类选择器最大的不同在于 使用次数上。

    通配符选择器

    通配符选择器用 "* "号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

    语法格式如下：

    *{
    属性1:属性值1;
    属性2:属性值2
}

    【示例 3-3】清除所有HTML标记的默认边距

    *{
    margin:0; /*定义外边距*/
    padding:0;/*定义内边距*/
}

    组合选择器

    语法格式如下：

    选择器1,选择器2,选择器n{
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3
}

    组合选择器可以让多个选择器共用一个css样式代码。

    【示例 3-4】组合选择器的应用

    <!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>组合选择器的应用</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border:1px solid yellow;
        }
    </style>
</head>

<body>
    <div class="class01">div标签1</div><br/>
    <span id="id01">span标签1</span><br/>
    <div>div标签2</div><br/>
    <div class="class01">div标签3</div><br/>
    <span>span标签2</span><br/>

</body>

</html>

    执行结果如下：
    image


    4、常用样式

    a、颜色：

    • 颜色可以写颜色名：如 black、blue、red、green等。

    • 颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0)，#0368E5，如果写十六进制值必须加#号。


    b、宽度（width）：

    • 宽度可以写像素值：19px。

    • 也可以写百分百比值：20%


    c、高度（height）:

    • 高度可以写像素值：19px。

    • 也可以写百分百比值：20%


    d、背景颜色：

    • background-color：#0F2D4C;

    e、字体样式：

    • color：#FF0000；字体颜色为红色。
    • font-size：20px； 字体大小。
    • font-family：‘宋体’、‘楷体’、‘黑体’；字体名称。
    • font-weight：normal/bold； 字体粗细 ，normal：正常，bold：加粗。
    • font-style：normal/italic/oblique；字体风格，italic：斜体，oblique：倾斜。

    f、红色1像素实现边框：

    • border：1px solid #FF0000;

    g、div居中：

    • margin-left：auto；margin-right：auto;
    • 简写 margin：0 auto；

    h、文本居中：

    • text-align：center；

    i、超链接去下划线：

    • text-decoration: none;

    j、表格细线：

    table {
    /* 设置边框 */
    border: 1px solid red;
    /* 将边框合并 */
    border-collapse: collapse;
}

td,th {
    /* 设置边框 */
    border: 1px solid red;
}

    k、列表去除修饰：

    ul {
    list-style:none;
}

    【示例 3-1】常用样式1

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 常用样式</title>
    <style type="text/css">
        div {
            /* 字体颜色 */
            color: red;
            /* 盒子边框 */
            border: 1px solid purple;
            /* 盒子宽度 */
             300px;
            /* 盒子高度 */
            height: 300px;
            /* 盒子的背景颜色 */
            background-color: green;
            /* 字体大小 */
            font-size: 30px;
            /* 盒子居中 */
            margin-left: auto;
            margin-right: auto;
            /* 文本居中 */
            text-align: center;
        }
        
        a {
            /* 去下划线 */
            text-decoration: none;
        }
        
        table {
            /* 设置边框 */
            border: 1px solid red;
            /* 将边框合并 */
            border-collapse: collapse;
        }
        
        td,th {
            /* 设置边框 */
            border: 1px solid red;
        }
        
        ul {
            /* 无序列表去除修饰 */
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>好好学习!</li>
        <li>天天向上!</li>
    </ul>

    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>职位</th>
        </tr>
        <tr>
            <td>001</td>
            <td>白豆五</td>
            <td>算法工程师</td>
        </tr>
        <tr>
            <td>002</td>
            <td>手可摘棉花</td>
            <td>产品经理</td>
        </tr>
    </table>
    <a href="http://www.baidu.com">百度一下</a>
    <div>我是div标签</div>
</body>
</html>

    执行结果如下：
    image
  • 相关阅读:
    【SPOJ】6779 Can you answer these queries VII
    【SPOJ】1557 Can you answer these queries II
    【SPOJ】2916 Can you answer these queries V
    【CodeForces】86D Powerful array
    【SPOJ】1043 Can you answer these queries I
    【HDU】3727 Jewel
    【HDU】3915 Game
    【SPOJ】1043 Can you answer these queries III
    【SPOJ】2713 Can you answer these queries IV
    成为一名更好的软件工程师的简单方法
  • 原文地址：https://www.cnblogs.com/m987/p/15123923.html
Copyright © 2011-2022 走看看