Python web前端 02 CSS

一、选择器

  1、CSS的几种样式(CSS用来修饰、美化网页的)

#建立模板
复制内容--->SETTING---> Editor ----->font (SIZE:修改字体大小)----> color scheme(背景)---->File and Code Templates(建立模板) ----->Scheme(改成Project)---->将刚复制的内容粘贴到上面,那么以后创建的html文件就自动变成那么模板了
#在head上面的style里面设置的样式叫做内嵌的CSS样式
#在body里面自己设置的style样式叫做行间样式 #基于这种原理,一个网页的CSS样式成千上万,所以需要在外面创建一个stylesheet表来设置CSS,然后在原来的html文件中引入这个CSS,在title下面输入<link rel="stylesheet" href="(相对路径中的CSS文件名)">
#关于CSS样式设置优先级的问题
#都是对div(或任何其他的)的修饰的时,遵循从近原则,哪里离body近就选择哪个,而行间样式的优先级是最高的,但只能作用于修饰的单个div

  2、基本选择器:元素选择器、通配符选择器、class选择器、id选择器

#元素选择器(标签选择器)div p
#选择相同的元素对相同的元素设置一种css样式,选中页面中所有的此元素 #通配符选择器 * :所有的行间距都为0(把这段话加到模板里面)
*{ margin:0;padding:0;} #class选择器
#给标签设置一个class属性,在写样式时,在class名字前面加个“.” ,一般给具有相同属性的元素设置同一个class #id选择器
#给标签设置一个id属性,写样式时要在id名字前加个“#”,id名字不要重名 #优先级:id> class>标签选择器div p >通配符选择器 *

  3、复杂选择器:群组选择器、兄弟选择器、子代选择器、相邻选择器、子代选择器

#群组选择器 ,
#若希望div和p标签样式一样,可以再上面的style上面直接用div,p{设置样式},用逗号隔开,两者样式相同,三者以上也都可以 #兄弟选择器 ~
#若想要设置一个div下面的p标签的样式,可以在上面的style内添加div~p{设置样式},只会选择后面的,不会选择前面的 #子代选择器 >
#div下面的内嵌div若要设置样式,div>div{设置样式},同样继续内嵌的可以继续用>号,div>div>span{设置样式} #相邻选择器 +
#若要设置某个div相邻的p标签的样式,可以用div+p{设置样式},只要满足条件都会触发,也可用两个+号,表示"三连坐" #后代选择器 空格
#现在有ul下面3个li,ol下面3个li,若要设置ul下面的li的样式,可以再上面的style上 用ul li{设置样式},这个子代选择器可以用多个空格;若要找ul里面的class,需要直接用 ul.box li{设置样式}

  4、伪类选择器

#伪类选择器 a标签
#未被点击的颜色 a:link{color:blue;}
#已被点击的颜色 a:visited{color:blueviolet;}
#鼠标悬停其上的颜色 a:hover{color:red;} 重点
#鼠标已经按下但是还没有释放的颜色 a:active{color:yellow;} #如果要四个都设置必须以这个顺序来设置,便捷记忆方法LoVe HATe
#同样可以给div添加hover属性,鼠标悬浮上面变色
div:hover{设置样式} #这是改变div div:hover p{设置样式} #这是改变div的后代p,简而言之就是找到p所在的位置 #修改悬浮目标上鼠标变形手指,在hover目录下改
div:hover{cursor:pointer;} #pointer表示手指,help表示帮助(?),wait表示等待(转圈圈),default表示默认

  5、复杂选择器的优先级

#复杂后代选择器
#1、先比id(最高位) class(中间位) tagName(标签个位数)
#2、id选择器个数不相等,id越多,优先级越高
#3、id选择器个数相同,则看class,class多的优先级高
#4、class个数相同,就看tagName个数
#5、最后就是从近原则

  6、复杂选择器的优点:快速找到目标

二、table表格

#table标签
#分为 thead(头部) tbody(身体) tdoot(尾部)这些可写可不写,为了便于修改内部的tr而设置的
#tr(行)th(单元格) td(多用于里面的数据) #加边框
<table border=""> ... </table>#加个border即可 ,border="0"就是无边框,也可以在style里面设置table{border_collapse:collapse;}#collapse表示边框合并,如果相邻的话共用一个框,separate表示默认值,边框分开,不合并,一般开发不选择默认;text-align:center表示文字水平居中 #合并单元格
#行合并
#如果说要合并行,在那一行的td里面设置属性 rowspan="2" 行合并2行,原来的数据会被挤走,所以记得注释掉 #列合并
#在那一列的td里面设置属性 colspan="3" 列合并3列,原数据被挤走同理要注释
#表格名字
#在thead前面加上caption,写上名字即可

Python web前端 02 CSS的更多相关文章

  1. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  2. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  3. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  4. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  8. Python web前端 06 运算符 循环

    Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...

  9. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...

随机推荐

  1. codeforce 461DIV2 E题

    题意 有n棵树排成一排,每个树上都有c[i]只小鸟,只有站在树下才可以召唤小鸟,在i-th树下召唤k(k<=c[i])只小鸟需要消耗cost[i]*k的法力值,但是每召唤一只小鸟可以将法力值的上 ...

  2. LINUX下用C语言历遍目录 C语言列出目录 dirent.h在C/C++中的使用

    LINUX下历遍目录的方法一般是这样的打开目录->读取->关闭目录相关函数是opendir -> readdir -> closedir #include <dirent ...

  3. HTTP 协议中 URI 和 URL 有什么区别?

    HTTP 协议中 URI 和 URL 有什么区别? HTTP = Hyper Text Transfer ProtocolURI = Universal Resource IdentifierURL ...

  4. c语言函数是怎么传递参数的

    其实就是把变量或常量复制了一份给函数中的变量,简单说来就是复制的过程. 有一个很经典的问题:用函数交换两个变量的值. int a=1; int b=2; swap(a,b) 有一个函数是这样实现的 v ...

  5. Java后端WebSocket的Tomcat实现(转载)

    一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通 ...

  6. Django框架 之 Ajax

    Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...

  7. ByteUnit

    JDK里面有TimeUnit,看spark源码有个ByteUnit.这个类还是挺不错的. public enum ByteUnit { BYTE (1), KiB (1024L), MiB ((lon ...

  8. Chrome浏览器控件安装方法

    说明:只需要安装up6.exe即可,up6.exe为插件集成安装包. 1.以管理员身份运行up6.exe.up6.exe中已经集成Chrome插件.  

  9. 用maven将项目安装到本地仓库,为什么老是在默认仓库地址(C:\Users\userName\.m2\repository)

    使用mvn clean install安装项目到本地的时候,在idea中配置好了本地仓库地址,见下图: 但是安装时,还是安装到了C:\Users\userName\.m2\repository路径下, ...

  10. Android在一个app中启动另一个App

    Intent intent = new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_LAUNCHER); Compon ...