清除系统默认样式

大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局
通常清除系统样式,利于开发
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标签的四大伪类,背景图片的更多相关文章

  1. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  2. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  3. css字体样式+文本样式

    font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursi ...

  4. jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  5. 去除android或者iOS系统默认的一些样式总结

    ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 iOS用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0, ...

  6. from提交数据,高级选择器,伪类选择器,前端样式等

    1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...

  7. day48 前端高级选择器优先级

    复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...

  8. python 46 边界圆角 、a_img_list标签 、伪类选择器

    一:边界圆角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  9. 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

随机推荐

  1. Windows 下端口被占用

    0. 参考 参考链接:  Windows下如何查看某个端口被谁占用 1. 遇到的问题 在 Windows 下的 IDEA 中启动 Web 服务显示 8080 端口被占用,程序无法正确启动. 2. 解决 ...

  2. ubuntu14.04 安装 php Composer时 composer:未找到命令

    在Ubuntu14.04环境下,进行composer安装时,各个方面都很顺利,安装完成后,出现了如下的错误提示: 百思不得其解!本人的环境是Ubuntu14.04 ,安装过程也是严格按照compose ...

  3. deepin 15.8桌面系统

    深度桌面环境是深度科技自主开发的美观易用.极简操作的桌面环境,主要由桌面.启动器.任务栏.控制中心.窗口管理器等组成,系统中预装了 WPS Office.搜狗输入法.有道词典.网易云音乐以及深度特色应 ...

  4. Docker: 企业级镜像仓库Harbor的使用

    上一节,演示了Harbor的安装部署 这次我们来讲解 Harbor的使用. 我们需要了解到: 1. 如何推镜像到镜像仓库 2. 如何从镜像仓库拉取镜像 3. 如何运行从私有仓库拉取的镜像 # 查看 h ...

  5. 清除被占用的8080端口,否则npm run dev无法正常运行

    解决方案一: 1. 打开git-bash2. 输入:netstat -ano查看所有端口信息,如图,找到端口 8080,以及对应的 PID 3.输入:tskill PID 即可杀死进程 解决方案二: ...

  6. threejs学习笔记(二)

    THREE.WebGLRenderer THREE.Scene THREE.OrthographicCamera正交相机 THREE.PerspectiveCamera透视相机 renderer.se ...

  7. SpringCloud(4)熔断器 Hystrix

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...

  8. 只能用Android studio做平台移植了! 在Windows10下, 开发Android。

    安装好IDE后, 会一直显示同步失败, 看看如下步骤: 需要注意的是: -> 安装NDK      自带的NDK版本有问题    自己去下一个15版本的 -> 按照系统提示一步一步安装其他 ...

  9. linux 命令mkdir、cd

    mkdir 创建文件夹 -p 递归创建文件夹 可以一次性创建多个目录 cd pwd 显示当前目录的绝对路径 rmdir  删除空目录  只能删除空目录  鸡肋,基本用rm cp  复制文件产品 -r ...

  10. Django+Vue打造购物网站(十一)

    第三方登录 微博创建应用,修改回调地址 http://open.weibo.com/authentication 安装第三方登录插件 https://github.com/python-social- ...