python全栈开发 * css 选择器 浮动 * 180808
css 选择器
一.基本选择器
1.标签选择器
标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
2.id选择器
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{
background:green;
} #s1{
color: red;
} #s2{
font-size: 30px;
}
3.类选择器
所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。
同一个标签中可以携带多个类,用空格隔开
.lv{
color: green; }
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
4.通配选择器
*{ } 包含head body
总结:
- 不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
- 每个类要尽可能的小,有公共的概念,能够让更多的标签使用
面试
到底使用id还是用class?
答案:尽可能的用class。除非一些特殊情况可以用id
原因:id一般是用在js的。也就是说 js是通过id来获取到标签
二.高级选择器
1.后代选择器
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
1 .container p{
2 color: red;
3 }
4 .container .item p{
5 color: yellow;
6 }
2.子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{
2 color: yellowgreen;
3 }
3.并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
1 /*并集选择器*/
2 h3,a{
3 color: #008000;
4 text-decoration: none;
5
6 }
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
4.交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
1 h4{
2 width: 100px;
3 font-size: 14px;
4 }
5 .active{
6 color: red;
7 text-decoration: underline;
8 }
9 /* 交集选择器 */
10 h4.active{
11 background: #00BFFF;
12 }
它表示两者选中之后元素共有的特性。
三.属性选择器 (一般用于表单控件)
根据标签中的属性,选中当前标签
1.[for]
2.[for="username"]{ color: yellow} 找到for属性的等于username的元素 字体颜色设为黄色
3.[for^="user"] { color: #008000;} 以user开头
4.[for$='vvip']{color : red} 以VVIP结尾
5.[for*="vip"] { color : #00BFFF} 包含vip 元素的标签
6.指定单词的属性
lable[for~='user1'] {color : red}
input[type="text"] {background : red}
示例:
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
四.伪类选择器
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte
1.没有被访问的a 标签的样式 a : link { color : #666}
2.访问过后的a标签的样式 a : visited {color : yellow}
3.鼠标悬停时a标签的式样 a :hover {color : green}
4.鼠标摁住的时候a标签的样式 a : active{ color : yellowgreen
1 /*没有被访问的a标签的样式*/
2 .box ul li.item1 a:link{
3
4 color: #666;
5 }
6 /*访问过后的a标签的样式*/
7 .box ul li.item2 a:visited{
8
9 color: yellow;
10 }
11 /*鼠标悬停时a标签的样式*/
12 .box ul li.item3 a:hover{
13
14 color: green;
15 }
16 /*鼠标摁住的时候a标签的样式*/
17 .box ul li.item4 a:active{
18
19 color: yellowgreen;
20 }
5.介绍一种css3的选择器nth-child()
(1)标签 : first-child{ font-size:20px; color:red} 选第一个元素
(2标签 : last-child{ font-size:20px; color:red} 选最后一个
(3标签 :nth-child(3){ font-size:20px; color:red} 选中当前指定的元素 数值从1开始
(4)标签 :nth-child(n){font-size:20px; color:red} n表示选中所有,从0开始,0表示没有选中
(5) 标签:nth-child(2n) 偶数
(6) 标签 nth-child(2n-1) 奇数
隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
复制代码
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
} /*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: purple;
} /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
} /*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/ div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
五.伪元素选择器
1. 设置首字母的样式
p:first-letter{
color: red;
font-size: 30px;
}
2.在....之前 添加内容 使用此伪元素选择器一定要结合content属性
p:before{
content:'alex';
}
3. 在...之后 添加内容 布局 有关 (清除浮动)
p:after{
content:'&';
color: red;
font-size: 40px;
}
补充:
重置样式:*{padding:0; margin : 0}
去点 : 标签{list-style : none}
display相关设置
inline行内显示
inline-block行内块
block 块
none 隐藏(不显示占用位置)
visible-hidden(隐藏占用位置) height : 0
python全栈开发 * css 选择器 浮动 * 180808的更多相关文章
- python 全栈开发,Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- python全栈开发目录
python全栈开发目录 Linux系列 python基础 前端~HTML~CSS~JavaScript~JQuery~Vue web框架们~Django~Flask~Tornado 数据库们~MyS ...
- Python全栈开发相关课程
Python全栈开发 Python入门 Python安装 Pycharm安装.激活.使用 Python基础 Python语法 Python数据类型 Python进阶 面向对象 网络编程 并发编程 数据 ...
- Python 全栈开发【第0篇】:目录
Python 全栈开发[第0篇]:目录 第一阶段:Python 开发入门 Python 全栈开发[第一篇]:计算机原理&Linux系统入门 Python 全栈开发[第二篇]:Python基 ...
- Python全栈开发【面向对象进阶】
Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈开发【模块】
Python全栈开发[模块] 本节内容: 模块介绍 time random os sys json & picle shelve XML hashlib ConfigParser loggin ...
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
随机推荐
- C++自定义String字符串类,支持子串搜索
C++自定义String字符串类 实现了各种基本操作,包括重载+号实现String的拼接 findSubStr函数,也就是寻找目标串在String中的位置,用到了KMP字符串搜索算法. #includ ...
- Educational Codeforces Round 52 (Rated for Div. 2)
题目链接 A. Vasya and Chocolate 题意 已知钱,价格,赠送规则求最多获得巧克力数 思路常规算即可 代码 #include <bits/stdc++.h> #defin ...
- 用Python进行SQLite数据库操作
简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...
- EF优化之启动预热
为什么Entity Framework的初始化速度慢如蜗牛呢? 对于在应用程序中定义的每个DbContext类型,在首次使用时,Entity Framework都会根据数据库中的信息在内存生成一个映射 ...
- 【原创】大数据基础之Spark(3)Spark Thrift实现原理及代码实现
spark 2.1.1 一 启动命令 启动spark thrift命令 $SPARK_HOME/sbin/start-thriftserver.sh 然后会执行 org.apache.spark.de ...
- Js的那些事
先说说 var array = new Array(10); 和 var array = Array.apply(null, {length:10});这两个有啥区别,乍一看两个都是生成长度是10的 ...
- Visual Studio 2015中 没有“安装和部署”的解决方法
使用Visual Studio 2015 Community新建项目,在已安装模板中的“其它项目类型”下未找到“安装和部署”选项.在微软官网下载 Microsoft Visual Studio 201 ...
- 利用Centos服务器来搭建自己的splash,不再被安装的各种环境繁琐而担忧
Centos7.5 ----- docker ------- splash 第一步:服务器环境的配置 第二步:dcoker环境的配置 ...
- php实现微信企业向用户付款
<?php header('content-type:text/html;charset=utf-8'); $data['mch_appid']='##################';//商 ...
- 20175312 2018-2019-2 《Java程序设计》结对编程练习_四则运算(第二周:整体性总结)
20175312 2018-2019-2 <Java程序设计>结对编程练习_四则运算(第二周:整体性总结) 结对对象与其博客链接 20175309 刘雨恒:https://www.cnbl ...