CSS

  • 颜色：RGB三原色。支持颜色名（141个）、颜色值（十六进制00oD~#FFoD）

  • CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。本质上就是对标签进行点缀。

1CSS的导入方式：

  1. 在标签上写style

    <div style="color:red; font-size:18px; background-color:pink;">
    男同学
</div>

  2. 在head标签中写style标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        .xx{
            color:red; 
            font-size:18px; 
            background-color:pink;
        }
    </style>
</head>
<body>
	<div class="xx">男同学</div>
</body>
</html>

  3. 写到文件中

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="sylesheet" href="common.css"/>
</head>
<body>
	<div class="xx">男同学</div>
</body>
</html>
  • pycharm有可以快速编译前端代码的功能，而不用flask或者django

2CSS的选择器

  • 格式

    选择器{属性：值；属性：值}

  • 类选择器：标签里使用class属性

    <head>
    <style>
        .c1{
            display:block;
        }
    </style>
</head>
<body>
    <div>xx</div>
    <a class='c1'>xx</a>
</body>

  • 标签/元素选择器：为某一元素指定同一CSS样式

    <head>
    <style>
        div{
            color:red; 
        }
    </style>
</head>
<body>
	<div>男同学</div>
	<div>男同学</div>
    <a>男同学</a>
</body>

  • 后代选择器：给某个元素包含的元素定义样式

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
    	<!--选div下的所有元素-->
        	 div{
            color:red; 
        }
        <!--选择div下的a-->
        	 div a{
            color:red; 
        }
        <!--子选择div下的a-->
             div > a{
            color:red; 
        }
    </style>
</head>

  • ID选择器：由于id唯一，所以id选择器只能被引用一次

    <head>
    <style>
        #n1{
            color:red; 
        }
    </style>
</head>
<body>
	<div id="n1">男同学</div>
    <a>男同学</a>
</body>

  • 属性选择器

    <head>
    <style>
        input[type='text']{
         	color:red;   
        }
    </style>
</head>
<body>
    <input type='text' />
    <input type='password' />
</body>

  • 关于选择器：

多：类选择器、标签/元素选择器、后代选择器
少：属性选择器、ID选择器、并集选择器等
只有类选择器（.类）需要用class引用

3CSS样式

3.1字体

  • color
  • front-size:50px
  • front-style:normal\italic
  • front-family:字体样式
  • front-weight:normal/bold/bolder

3.2文本样式

line-height：行间距

text-align：文本在水平方向的位置（=center居中）

3.3背景样式

background-color/image/position

3.4盒模型

3.4.1高度/宽度/边框

  • 默认情况下，高度和宽度无法应用在行内标签上。

  • 默认情况下，块级标签虽然设置的宽度，右边空白区域也被占用。

  • 宽度支持百分比

.c1{
	height:300px;
	width:500px
}

3.4.2盒子外边距

margin-top:10px;
margin-left:10px;

margin:10px;     /* 上下左右 */

margin:10px 20px;   /* 上下=10   左右=20 */

margin:10px 20px 9px 4px;  /* 上 右 下 左  -> 顺时针*/ 

margin:auto; /*自动*/

3.4.3盒子内边距

padding-left: 10px

padding:10px;

padding:10px 20px;

padding:10px 20px 10px 20px;

3.4.4块级+行内标签

  • 综合div和span的特点：display：inline-block
<style>
    .c{
        height:300px;
        width:500px;
        border:1px solid red;
        color:red;
        display: inline-block;
    }
</style>

3.5浮动

  • left/right/none（不浮动，默认）
<div>
	<div style="float:left;">左边</div>
	<div style='float:rigth;'>右边</div>
</div>

3.6定位

  • position/top/bottom/right/left/
  • static：静态定位
  • relative：相对定位
  • absolute：绝对定位