清除系统默认样式

大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局
通常清除系统样式,利于开发
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. Python爬虫之Beautiful Soup库的基本使用

  2. the security settings could not be applied to the database(mysql安装error)【简记】

    在安装mysql时,出现“The security settings could not be applied to the database because the connection has f ...

  3. MongoDB的常用命令和增查改删

    数据库操作 Mongodb MySQL 查询库 show databases | show dbs show databases 选中库 use databaseName use databaseNa ...

  4. 戏说春秋_i春秋 writeup

    <戏说春秋>第一关 图穷匕见 题目: 解:用winhex打开,拉到最后可发现一段编码 放到解密网站上解码. <戏说春秋>第二关 纸上谈兵 解:文中没有明确指出问题,也没有给出线 ...

  5. Java程序设计与数据结构导论--读后感

    与我前面所读的<Java7基础教程>相比,此书不适合自学,更适合作为教材使用. 虽然此书完整覆盖了Java的知识点和数据结构的基础问题,并且对每个部分都做了基本说明.但是因为没有深入展开, ...

  6. Django contenttypes 组件

    contenttypes组件 介绍 Django包含一个contenttypes应用程序(app),可以跟踪Django项目中安装的所有模型(Model),提供用于处理模型的高级通用接口. Conte ...

  7. Django 【认证系统】auth

    本篇内容 介绍Django框架提供的auth 认证系统 方法: 方法名 备注 create_user 创建用户 authenticate 登录验证 login 记录登录状态 logout 退出用户登录 ...

  8. python3 time模块

    import time '''查看系统时间拿到的是一个数字(时间戳)从1970-01-01 00:00:00开始计算,以秒为单位'''print(time.time()) 执行结果:155650817 ...

  9. easyui-tab标签

    一. 加载方式 //class 加载方式<div id="box" class="easyui-tabs" style="width:500px ...

  10. Git入门—创建项目

    Git入门—创建项目 注:win10系统下 打开Git Bash,进入存放仓库的目录 创建 初始化git init,该命令执行完后会在当前目录生成一个 .git 目录. 所有 Git 需要的数据和资源 ...