Python: WEB开发-CSS

TAGS: Python

层叠样式表，控制HTML的布局和样式

使用方式

三种使用方式

内联样式：在标签内使用属性style
页内样式：在 <head> 标签中使用 <style type="text/css"></style>
外部样式：使用CSS文件，使用 <link rel="stylesheet" type="text/css" href="mystyle.css">

优先级从高到低

范例：

<!-- t1.css -->
span {
    color: red;
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="t1.css">
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
  <span style="color: blue; font-size: 30px;">1111</span>
</body>
</html>

基本语法

selector {property1: value1; ...; propertyN:valueN}

选择器选择HTML的标签，花括号内声明属性和对应值，多个属性以分号分隔。

多个选择器使用逗号分隔。

例如 a {color:red; text-decoration:line-through} ，将链接标签文字颜色变成红色且有横线穿过

颜色写法

p { color: #ff0000; } /*大小写无所谓*/
p { color: #f00; } /*FF0000的缩写*/
p { color: rgb(255,0,0); } /*三原色表示，0~255*/

颜色，写16进制，可以压缩

选择器

标签选择器

body {text-align: center}

上例直接使用HTML标签的选择器，就是标签选择器，元素选择器。

注意，如果将标签改为*星号，表示统配所有HTML标签。

* {color: red}

id选择器

id指的是HTML标签内的属性id，例如 <div id="menu">

#menu {
    background-color: rgb(255, 255, 255);
    width: 100%;
    border-bottom: #f0f0f0 solid 1px;
    margin: 0px 0px 5px 0px;
}

background-color 背景色
border-bottom 向下的边界线
margin 外边框上右下左

类选择器

类，指的是标签中的class属性，例如 <div class='main center'>

.center {
    width: 80%; 
    margin: auto;
}

居中 margin:auto

范例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="t1.css"> -->
    <style>
        body {
            /* text-align: center; */
            font-size: 16px;
        }
        span {
            color: red;
        }
        .center {
            background-color: #f0f0f0;
            margin: auto;
            width: 80%;
        }
        #menu {
            background-color: #fff;
            width: 100%;
            border-bottom: 1px solid #000;
            margin: 0 0 5px 0;
        }
    </style>
</head>
<body>
    <div class="main center">
        <div id="menu">
            <ul>
                <li>主页</li>
                <li>Linux</li>
                <li>Python</li>
            </ul>
        </div>
        <span style="font-size: 30px;">1111</span>
        <p id="ss">sssssss</p>
    </div>
</body>
</html>

选择器分组

分组的选择就可以使用同样的样式声明同一个样式的时候可以使用可以是标签,可以是ID 也可以是class

h1,h2,h3,h4,h5,h6 { 
    color: green;
}

层次选择器

1、后代选择器

div li {
    display: inline; /*在一行显示*/
}

所有div标签id为menu下任意层下的li标签

div#menu li {
    /*在一行显示，之间相隔100像素*/
    display: inline-block;
    width: 100px;
}

2、子选择器

ul > li {
    display: inline;
}

所有div标签id叫menu的直接的子元素li标签

div#menu ul > li { 
    display: inline;
}

3、相邻兄弟选择器

兄弟标签改变属性，自己本身不改变

div.detail p + p {
    color: green;
}

范例：div的类detail下p标签下的直接兄弟标签变颜色。

<div class="detail">
  <p>title</p> <!--匹配上了p标签，向后找到直接兄弟content1-->
  <p>content1</p> <!--匹配上了p标签，向后找到直接兄弟content2-->
  <p>content2</p> <!--匹配上了p标签，没找到直接兄弟p标签-->
  <div>aa</div>   <!--没匹配上-->
  <p>content3</p> <!--匹配上p标签了，向后找直接兄弟，找到content4-->
  <p>content4</p> <!--匹配上了p标签，向后没找到兄弟-->
  <a>content1\2\4变色</a><!--没匹配上-->
</div>

4、显示消失

div#menu ul > li { 
    display: none;
}

class为detail的div标签下任意层下的近邻p标签的下一个p标签

伪类 pseudo-classes

伪类能增加样式，类似于class 锚伪类，链接标签a的四种状态

a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: blue} /* 鼠标移动到链接上 */
a:active {color: black} /* 选定的链接 */

伪类可以和css类配合使用

<style>
a.red:visited {color: #FF0000}
a:hover {
    color: red;
}
a {
    color: chartreuse;
    text-decoration-line: none;
}
</style>

<a class="red" href="css_syntax.asp">CSS Syntax</a>

注意，伪类和前面部分中间不要有空格

伪元素pseudo-element

伪元素能增加元素

::before 和 ::after 可以在元素前后插入内容。通常使用一个content属性为元素增加一个修饰性内容。

#homepage:after 
    content:url(http://www.baidu.com/kczx/images/why1.png);
}
a:before {
        content:"这是链接~~~";
}

属性选择器

E [ attr ] { sRules }   具有某属性

E [ attr = value ] { sRules }   具有某属性且等于value

E [ attr ~= value ] { sRules }  具有某属性且属性值中的一个是value

E [ attr |= value ] { sRules }  具有某属性且属性值使用了-，且-之前的部分是value的才匹配
*[class|="main"] 能和 <div class='main-center'> 减号之前的部分匹配

/* 链接具有href属性 */
a[href] { 
    color: blue;  
    text-decoration:line-through
}

/* 图片alt属性为ci_logo */
img[alt=ci_logo] { 
    height: 20px;
}

*[class="main center"] { 
    color:black
}

*[class~="center"] { 
    color:black
}

继承

body { 
    text-align: center; 
    color:red;
}

观察整个页面文字颜色，几乎都变成了红色。

页面中父元素中使用的样式，通过CSS继承，子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性。

常见样式

背景 background复合属性 http://www.w3school.com.cn/css/css_background.asp

字体 font复合属性 http://www.w3school.com.cn/css/css_font.asp

font = 
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ]  |
  <system-family-name>

body {
    /* font-style: italic; */
    /* font-weight: 400; */
    /* font-size: 14px; */
    /* font-family: 'microsoft yahei', 'simsun', serif; */
    font: normal 700 19px 'microsoft yahei', 'simsun', serif;
}

表格border

table
{ 
    border-collapse:collapse; /*相邻的单元格共用同一条边框*/
}

table,td
{ 
    border: 1px solid black;
}

margin外边距和padding内边距

margin: top right bottom left
padding: top right bottom left

padding:10px 5px 15px 20px; /*顺时针上右下左*/
padding:10px 5px 15px; /*上10px、左右5px、下15px*/
padding:10px 5px; /*上下10px、左右5px*/
padding:10px /*4方向全是10px*/
margin:auto /*浏览器计算外边距*/

内外边距都是顺时针设置4个方向，也可以单独设置

bootstrap 网站一些样式：https://v5.bootcss.com/docs/examples/