Python学习笔记-前端-CSS(一)

weer-wmq

已于 2023-09-17 15:57:09 修改

阅读量241

点赞数

分类专栏： Python前端文章标签：前端 css 学习

于 2022-05-12 14:33:32 首次发布

本文链接：https://blog.csdn.net/ITlearner007/article/details/124728324

版权

Python前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS简介

CSS(层叠样式表：Cascading Style Sheets)，就是给html语言写的前端加样式的，用于美化前端页面。

注释

同前，学习一种语言其注释很重要！
css文件注释格式为/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

语法结构

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

css的美化方式是选择某个标签后针对要美化的属性进行赋值，并以分号结束！

常用属性

常用属性有颜色color、背景色background-color、高度height、宽度width、字体大小font-size等。

前面先涉及这些，后面有深入的更多

引入方式

head内书写
```
<style>
	h1 {color:red;}
</style>
```

link引入外部css文件

<link rel="stylesheet" href="cssStudy.css">

直接在标签内书写
```
<h1 style="color:red;">CSS学习</h1>
```
ps:一般写项目时采用第二种，不建议采用第三种(因为不好检查)，在学习时采用第一种的方式比较方便(以下示例均采用第一种)

选择器

基本选择器

id选择器
用“#+id名”进行选择

#ddd {color:blue;}
/*对id=ddd的标签内容的颜色变为蓝色*/

类选择器
用“.+类名”进行选择

.ccc {color:orange;}
/*对'class=ccc'的标签内容的颜色变为橙色*/

标签选择器
直接选择标签名

p {background-color:red;}
/*对所有p标签将其背景色改为红色*/

通用选择器
用*表示选中所有标签
```
* {color:blue;}
  /*将html页面的所有标签全部变为蓝色*/
```
ps：一般不使用标签选择器和通用选择器，因为范围太大，而一个页面不可能那么简单。

组合选择器

后代选择器
用“空格”，表示选中父标签里任意后代(即嵌一层套或多层套)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div span {color:red;}
    </style>
</head>
<body>
    <div>
        <p>
          <span>孙子层</span>
        </p>
        <span>儿子层</span>
    </div>
</body>
</html>

结果为“儿子层”和“孙子层“都变为了蓝色

儿子选择器
用“>”选择，只选中父标签的儿子层
同后代选择器的例子，若改为div>span {color:red;}则只有“儿子层”变为红色

邻近选择器
用“+”号选择，表示选择标签的紧邻的下一个同级标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css blog</title>
    <style>
        div+p {color:red;}
    </style>
</head>
<body>
    <div>host</div>
    <p>邻居</p>
    <p>
      <span>弟弟</span>
    </p>
</body>
</html>

结果为“邻居”变为红色

弟弟选择器
用“~”选择，表示选择标签所有下面的同级标签
同邻居选择器例子，若为div~p {color:greenyellow;}则“邻居”和“弟弟”都变为荧光色

属性选择器

属性选择器是用[]来选择的

[username]：表示选择有属性username的标签
[username=‘bob’]：表示选择有属性username且属性值等于bob的标签
input[username=‘bob’]：表示选择有属性username且属性值为’bob’的input标签

伪类选择器

常用于a标签和input标签，比如a标签(链接标签)：当鼠标放上去是不是会换颜色啊

link：初始态，未点击时的状态
hover：鼠标悬浮在上面的状态
active：鼠标点中不放的状态

visited：鼠标点击后的状态

	<style>
		a:link{color:darkgrey;}
		a:hover{color:black;}
		a:active{color:red;}
		a:visited{color:green;}
	</style>
	
	<a href="https://www.jd.com"click me</a>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css blog</title>
    <style>
        /*设置首字大头*/
        p:first-letter {font-size:32px;}
        /*在文本开头添加内容 但不能选中复制*/
        p:before {content:'python';color:red;}
        /*在文本末尾添加内容 但不能选中复制*/
        p:after {content:'hahaha';color:blue;}
    </style>
</head>
<body>
    <p>人生苦短，我用Python</p>
</body>
</html>