伪元素选择器

"""通过css操作文本内容"""
1.修改首个字体样式
p:first-letter{
color: blue;
font-size: 96px;
}
2.在文本开头添加内容
p:before{
content: 'bule';
color: blue;
}
3.在文本结尾添加内容
p:after{
content: 'dd';
color: blue;
} 使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站的内容防爬

选择器优先级

# 研究方向
1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器

字体样式

# 文字字体
font-family: "Microsoft Yahei"
# 字体大小
font-size: 24px
# 字体粗细
font-weight: lighter\bolder
# 字体颜色
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
方式3:
color: #4f4f4f;

文字属性

# 文字对齐
text-align:center/left/right
# 文字装饰(重点)
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""

背景属性

# 1.背景颜色
background-color: red;
# 2.背景图片
background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
background-repeat:no-repeat # 不填充
repeat-x # 横向填充
repeat-y # 纵向填充
background-position:left top; 图片位置
background-attachment: fixed; 背景附着
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#336699 url('1.png') no-repeat left top;
"""

边框

# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
# 2.统一调整每个边的边框
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
如果长宽一样那么就是圆 不一样就是椭圆

display属性

"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留

盒子模型

# 所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个个快递盒
"""
快递盒组成部分
盒子模型
内部物品 content(内容)
内部物品与盒子内部的
距离 padding(内边距、内填充)
盒子的厚度 border\边框
盒子与盒子之间的距离 margin(外边距) ps:两个标签之间的距离 有时候可以用margin也可以用padding
"""
# 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值 # 2.padding用法与margin一致
同上 盒子模型页面布局
标签的水平居中 可以使用固定搭配
margin: 0 auto;

浮动

# 1.浮动的作用
float: left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 2.浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面) 补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来

解决浮动造成的影响

clear: left;   规定元素的哪一侧不允许其他浮动元素
推导流程
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可 很多前端页面框架使用的也是clearfix类名
"""

css修改文子背景浮动的更多相关文章

  1. CSS脱离文档流&浮动

    什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成 ...

  2. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  3. css修改input自动提示的黄色背景

    css修改input自动提示的黄色背景 input:-webkit-autofill { background-color: #FAFFBD; background-image: none; -web ...

  4. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

  5. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  6. day 41 标准文档流 浮动

    一.标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 标准文档 ...

  7. CSS(7)--- 通俗讲解清除浮动

    CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...

  8. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  9. 伪元素选择器,选择器优先级,CSS修改文字属性,CSS修改字体属性,CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

随机推荐

  1. elasticsearch 的倒排索引是什么 ?

    解答:通俗解释一下就可以. 传统的我们的检索是通过文章,逐个遍历找到对应关键词的位置. 而倒排索引,是通过分词策略,形成了词和文章的映射关系表,这种词典+映射表 即为倒排索引. 有了倒排索引,就能实现 ...

  2. Netty学习摘记 —— 再谈ChannelHandler和ChannelPipeline

    本文参考 本篇文章是对<Netty In Action>一书第六章"ChannelHandler和ChannelPipeline",主要内容为ChannelHandle ...

  3. 比较数字范围:判断number存在(minRange ~ maxRange)范围中

    一.使用场景 当需要比较范围时 如: 这种情况,如果要写三个表达式会很长,这时候就可以用这个工具类进行比较 number:用户输入(长,宽,高) minRange: 0.0 maxRange:33 二 ...

  4. jsp页面学习之"javascript:void(0)"的使用

    javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...

  5. 攻防世界baby_web

    baby_web 题目提示想想初始页,但我们一访问就会跳转到1.php我们使用bp抓包分析,我们发送到repeater模块修改请求访问1.php内容看看 发现flag隐藏了我们去hex中看看 这样我们 ...

  6. PAT B1015德才论

    题目描述: 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不 ...

  7. Android打开数据库读取数据

    打开数据库读取数据 private MyDatabaseHelper dbHelper; dbHelper=new MyDatabaseHelper(this,"List.db", ...

  8. 面试官:Zookeeper怎么解决读写、双写并发不一致问题,以及共享锁的实现原理?

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 今天清明假期,赶上北京玉渊潭公园 ...

  9. python---if、while、for

    if语句 当出现选择情况的时候,就需要用到if语句. # 第一种语法 if 条件: # 冒号将条件和结果分开,不可缺少 结果1 结果2 # 条件为真执行结果1,然后结果2:否则直接结果2 # 第二种语 ...

  10. numpy---(上)

    Numpy Numpy ndarray N维数组对象ndarray, 是一系列同类型数据的集合, 索引以0下标开始, 创建一个ndarray对象, 需调用array函数: numpy.array(ob ...