• 周五. 4月 26th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签
python

CSS笔记

由admin

11月 28, 2021

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

admin

相关文章

python
对嵌入字符串中的数字进行排序
3月 7, 2023 [db:作者]
python
如何使用Pandas对excel文件中的数据进行排序。并对副本进行排序
3月 7, 2023 [db:作者]
python
在pygtk Treevi中添加新行
3月 7, 2023 [db:作者]

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

You missed

python
python
python
python