清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片
清除系统默认样式
大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局
通常清除系统样式,利于开发
body,h1-h6,p,table {
margin:;
} ul {
margin:;
padding:;
list-style:none; #清除列表样式
} a {
text-decoration:none; #清除a标签下划线
color:black; # 设置a标签字体颜色
}
文本样式
简写: font: 字重 字体大小/行高 字族
font: normal 30px/200px "STSong"
<style> color:red; 字体颜色 字体大小:相关属性都是从父级继承
font-size:inherit; 继承
font-size:12px; 字体最小为12px font-weight:100-900 | bold粗线 | 字重
font-family:"微软雅黑" , "STSong" 华文宋 字族
line-height:100px; 行高
text-align:center | left | right 字体水平居中 text-indent:2em 文本缩进2个字,跟父级的字体有关
2rem 只和html的字体有关 text-decoration:none 清除划线
line_through 下划线
underline 中划线
overline 上划线 简写:font:字重 字体大小/行高 字族
font:normal 30px/200px "STSong"
</style>
高级选择器
群组选择器: 逗号 ,
<style>
.div1,.p1 {
width: 100px;
}
</style>
后代选择器:空格表示 div a
子代选择器:大于号表示 >
控制关系层次控制目标选择器
.sup > .sub { width: 100px; } 父子关系
.sup .sub { width: 100px; } 后代关系
兄弟选择器: + 相邻
~ 兄弟
通过关系层次控制一个目标选择器
.li2 ~ .li3 { width: 100px; } # 兄弟
.li2 + .li3 { width: 100px; } # 相邻
伪类选择器:
ul li:nth-child(3) { } 表示ul下的第三个li标签
ul:nth-child(3) > li:nth-child(6) { } 表示第 三 个ul下的第 六 个li
li:nth-child(3n-1) { } 表示偶数个 li:not(:last-child) {} 取反
多类选择器
.div.div1#dd {
width:50px;
} <div class="div div1" id="dd"> </div>
高级选择器优先级
选择器优先级和个数有关
基础选择器占主导 id > class > 标签 > 通配
选择器优先级相同时,跟顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class
边界圆角
左上角为第一个角,顺时针走, 先横后纵
div {
border-radius:50%; 圆形
border-radius:50%; 30px 60px 先横后纵
border-radius:50%; 30px/60px
}
a标签的四大伪类
未访问过状态
a:link {
} 鼠标悬浮状态
a:hover {
cursor:pointer; 手掌
} 鼠标点击时状态
a:active { } 鼠标离开时状态
a:visited { }
背景图片
background:图片地址 图片平铺 x轴 y轴
background:图片地址 图片平铺 x轴 y轴
background-image:url("01.png") no-repeat 20px 20px; background-repeat:no-repeat 不平铺
repeat 平铺
repeat-x
repeat-y background-position: 水平位置,垂直位置
center center; 居中
20px,50px; background-position-x:20px; x轴位移20px
background-position-y:20px; y轴位移20px
清除系统默认样式,文本样式,高级选择器(权重),边界圆角,a标签的四大伪类,背景图片的更多相关文章
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- css字体样式+文本样式
font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- 去除android或者iOS系统默认的一些样式总结
ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 iOS用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0, ...
- from提交数据,高级选择器,伪类选择器,前端样式等
1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- python 46 边界圆角 、a_img_list标签 、伪类选择器
一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
随机推荐
- Windows 下端口被占用
0. 参考 参考链接: Windows下如何查看某个端口被谁占用 1. 遇到的问题 在 Windows 下的 IDEA 中启动 Web 服务显示 8080 端口被占用,程序无法正确启动. 2. 解决 ...
- ubuntu14.04 安装 php Composer时 composer:未找到命令
在Ubuntu14.04环境下,进行composer安装时,各个方面都很顺利,安装完成后,出现了如下的错误提示: 百思不得其解!本人的环境是Ubuntu14.04 ,安装过程也是严格按照compose ...
- deepin 15.8桌面系统
深度桌面环境是深度科技自主开发的美观易用.极简操作的桌面环境,主要由桌面.启动器.任务栏.控制中心.窗口管理器等组成,系统中预装了 WPS Office.搜狗输入法.有道词典.网易云音乐以及深度特色应 ...
- Docker: 企业级镜像仓库Harbor的使用
上一节,演示了Harbor的安装部署 这次我们来讲解 Harbor的使用. 我们需要了解到: 1. 如何推镜像到镜像仓库 2. 如何从镜像仓库拉取镜像 3. 如何运行从私有仓库拉取的镜像 # 查看 h ...
- 清除被占用的8080端口,否则npm run dev无法正常运行
解决方案一: 1. 打开git-bash2. 输入:netstat -ano查看所有端口信息,如图,找到端口 8080,以及对应的 PID 3.输入:tskill PID 即可杀死进程 解决方案二: ...
- threejs学习笔记(二)
THREE.WebGLRenderer THREE.Scene THREE.OrthographicCamera正交相机 THREE.PerspectiveCamera透视相机 renderer.se ...
- SpringCloud(4)熔断器 Hystrix
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- 只能用Android studio做平台移植了! 在Windows10下, 开发Android。
安装好IDE后, 会一直显示同步失败, 看看如下步骤: 需要注意的是: -> 安装NDK 自带的NDK版本有问题 自己去下一个15版本的 -> 按照系统提示一步一步安装其他 ...
- linux 命令mkdir、cd
mkdir 创建文件夹 -p 递归创建文件夹 可以一次性创建多个目录 cd pwd 显示当前目录的绝对路径 rmdir 删除空目录 只能删除空目录 鸡肋,基本用rm cp 复制文件产品 -r ...
- Django+Vue打造购物网站(十一)
第三方登录 微博创建应用,修改回调地址 http://open.weibo.com/authentication 安装第三方登录插件 https://github.com/python-social- ...