CSS笔记

'''
CSS : 
     1. CSS的导入
 2. 选择标签
 3. 操作标签
 4. 布局
 5. 伪类
''' # 综述

'''
CSS的导入方式:
 1. 写死
 <p style='#CSS代码'></p>
 
 2. 嵌入式
 <style>
 #CSS代码
 </style>
 
 3. 导入式: 先渲染html, 再渲染css
 <style type='text/css'>
 @import 'test.css'
 </style>
 
 4. 链接式: 将所有css文件准备好, 与html文件一起渲染
 <link href='test.css' rel='stylesheet' type='text/css'> 
''' # CSS导入方式

'''
选择标签:
 1. 基本选择器
 *{} # 通用选择器
 p{} # 标签选择器: h, p, div, table, ul/ol, li, table, th, td, form, br, hr (级联标签)
 span, a, input, select, textarea, button, img (内联标签)
 .cls{} # class选择器
 #id{} # id选择器(唯一选择)
 [attr]{} # 属性选择器
 [attr='v']{} # 属性选择器
 
 2. 组合选择器
 div.cls{} # 标签 + class选择器
 div[attr]{}, div[attr='v']{} # 标签 + 属性选择器
 
 3. 多元素选择器
 div, p{} # 多标签选择
 
 4. 后代选择器
 div p{} # 在div的嵌套中寻找所有的p
 
 5. 子代选择器
 div > p {} # 只在div的第一层嵌套中寻找p 
 
 6. 毗邻选择器
 div + p{} # 在div之后, 紧挨着div的p 

多种选择器作用同一个标签的优先级计算: 
 style > id > .cls 属性> 标签名 
''' # 选择标签

'''
操作标签属性:
 1. 标签从内到外为:
 content, padding, border, margin
 
 2. padding/border/margin属性
 padding/margin:10px 5px 15px 20px; # 上 右 下 左
 padding/margin:10px 5px 15px # 上 右左 下
 padding/margin:10px 5px # 上下 右左
 padding/margin:10px # 上右下左 
 注意:
 #1 padding(内边距), margin(外边距)
 #2 内联标签只能设置左右边距
 #3 兄弟margin按大的取
 #4 父子margin, 子margin向上寻找父级的border,padding, 内联标签内容, 没有则合并父级, 继续向上寻找 
 
 border:5px solid gray # 大小 格式 颜色 
 transparent # 边界透明
 
 2. content属性:
 1)基本属性
 width/height # 标签文本框大小(不包括padding)
 background-color # 背景色(包括padding)
 background-img: url('/url') # 背景图片
 background-repeat: repeat/no-repeat # 背景图片是否重复
 background-position: 同

转载于:https://www.cnblogs.com/lancelotxly/p/10844306.html