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之后, 紧挨着divp

多种选择器作用同一个标签的优先级计算:
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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值