前段---css
css主要是用来做如何显示html元素的
当浏览器读到一个样式表,它就会按照这个样式表来对文档做渲染
注意:每一个css样式表都是由两个部分组成的,
1,选择器
2,声明
声明又包括属性值和属性,每个声明之后用分号结束
一,css引入方式
1,行内样式
<p style="color:red" >ergou </p>
2,内部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
p{
color: aqua;
}
</style>
</head>
<body> <p >二狗</p>
3,外部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="ss.css"> </head>
二,css选择器
,基本选择器
在css格式文本里:
1元素选择器
p{
color:red;
}
2,id选择器
#l{
color: green;
}
3,类选择器
.ll{
color: gold;
}
p.l1{
font-size: 33px;
} 先看p的条件再看l1的,li的没有就遵循p的
4,通用选择器
*{
color: bisque;
} 不用绑定,,默认全局通用
组合选择器
1,后代选择器
id版本后代选择器
#d1 p{
color: red;
}
单纯的后代选择器
div p{
color: red;
}
后代一定要被包起来,如果是根据id来的话就在div后面加一个id
2,儿子选择器
#v>p{
color: gold;
}
只有用id使用才能看出来与后代的区别
3,毗邻选择器
div+p{
color: gold;
}
div的上下都可以被影响
4,弟弟选择器
div~p{
color: blue;
}
在div后面的,,同一级的
5,属性选择器
[ff]{
color: blue;
} [ff=“55”]{
color: blue;
}
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
} /*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
} /*找到所有title属性中包含(字符串包含)hello的元素*/
[title*="hello"] {
color: red;
} /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
[title~="hello"] {
color: green;
}
三,分组和嵌套
1,分组
用逗号隔开
div,#p1{
color: blue;
}
2,嵌套
就是多个css嵌套使用
四,选择器的优先级
1,css继承
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
color: red;
}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {
color: green;
}
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
2,选择器的优先级
除此之外还可以通过添加 !import方式来强制让样式生效,但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。
万不得已可以使用!import
五,伪类选择器
关于伪类选择器,我们来拿链接举例
/*未访问的链接*/
a:link{
color: red;
}
/*已访问的链接*/
a:visited{
color: gold;
}
/*当鼠标放在上面的时候*/
a:hover{
color: green;
} /*选定的链接,就是点击下去的瞬间*/
a:active{
color: aqua;
}
input框获取焦点时
input:focus{
outline-color: green;#设置文本框的外边框的颜色
background-color: red;# 就是设置输入框的背景颜色
}
伪元素选择器
常用的:
first-letter
给字段的首字母设置格式和颜色
p:first-letter{
font-size: 144px;
color: red;
}
before
在 每个p字段前添加字符
p:before{
content: "**";
color: blue;
}
after在之后添加内容
p:after{
content: "**";
color: blue;
}
六,css属性
1,字体属性
body{
font-family: "Microsoft Yahei","微软雅黑","Arial",sans-serif;
}
字体大小:
font-size设置字体的大小
p{
font-size: 44px;
}
font-style后加
italic | 字体倾斜 |
normal | 默认值,正常粗细 |
font-weight:lighter; | 更细 |
font-weight:bold; | 粗体 |
font-weight:bolder; | 更粗 |
font-weight: 900; |
设置具体粗细,400等同于normal,而700等同于bold |
font-weight:inherit; |
继承父元素字体的粗细值 |
十六进制设置字体颜色
color: #ff0000;
rgb值设置
color:rgb(34,45,675);
rgba
a: 透明度
color:rgba(34,45,675,0);
文字属性
1,对齐
左对齐
text-align: left;
右对齐
text-align: right;
居中
text-align: center;
两端对齐
text-align: justify;
2,文字装饰
text-decoration属性用来给文字添加特殊效果
none默认,定义标准的文本
text-decoration: none;
underline下划线
text-decoration: underline;
overline定义文本上的一条线
text-decoration: overline;
line-trough穿过文本的线
text-decoration: line-through;
继承父元素的text-decoration属性的值
text-decoration: inherit;
常用的为去掉a标签默认的自划线:
a{
text-decoration: none;
}
首行缩进
text-indent:32px;
text-indent: 32px;
背景属性
设置div的背景颜色
.c{
background-color: aqua;
}
设置背景图片
<style>
.c{ width: 600px; 设置div的大小
height: 600px;
border: 1px solid black;添加边框,为实线 颜色为黑色
background-color: aqua; 设置背景颜色
background-image: url("2.png"); 设置背景图片
background-repeat: repeat; 默认repeat允许铺满
background-repeat: repeat-x; 只能横着铺
background-repeat: repeat-y; 只能纵着铺
background-repeat: no-repeat; 不允许铺满,也就是只有一个
background-position: center;居中
background-position: 50% 70%; 调位置
} </style>
定住背景图片,
background-attachment: fixed;
边框属性
border-width设置边框的粗细
border-color设置颜色
border-style设置边框是实线还是虚线等
简写方式:
border:2px solid red;
边框的样式:
none:无
dotted:点状虚线边框
dashed:矩形虚线边框
solid:实线
除了可给边框统一设置,还可以指定给哪一边设置:
border-top-style:solid; top上
left左
right右
bottom下
display属性
用于控制html元素的显示效果
display:"none":HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:" block"块级标签
display: inline " 内行标签"
display:“ inline-block”使元素同时具有行内元素和块级元素的特点。
display:none与visibilit:hidden区别
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
去掉列表前的黑点
ul{
list-style-type: none;
}
li > a {
border-right: 1px solid red;
padding: 0 15px; 文本距离,前面的是上下
}
css盒子模型
margin:用于控制元素与元素之间的距离,margin的最基本用途就是控制元素周围空间
的间距,从视觉角度上达到相互隔开的目的
padding:用于控制内容与边框之间的距离
border:边框
content内容:盒子的内容,显示文本和图像
<style>
.c{
margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 5px;
}
</style>
但是一般推荐使用简写
.cc{
margin: 5px 5px 5px 5px;
}
顺序是按照上右下左
常见居中
.cc{
margin: 0 auto;
} 0代表上下,auto代表左右居中
padding内填充
.c{
padding-top: 2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 5px;
}
推荐使用
.cc{
padding: 5px 5px 5px 5px;
}
顺序:上右下左
补充padding的常用简写方式:
- 提供一个,用于四边;
- 提供两个,第一个用于上-下,第二个用于左-右;
- 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
- 提供四个参数值,将按上-右-下-左的顺序作用于四边;
float
在css中任何元素都可以浮动
浮动元素会生成一个块级框,而不论它本身是何种元素
关于浮动的特点
1,浮动的框可以向左或者向右移动,直到它的边缘碰到包含框或者另一个浮动框的边框
2,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样
取值对的三种方式:
left:
right:
none:
clear清楚不允许浮动
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
clear属性只会对自身起作用,而不会影响其他元素
父标签塌陷问题:
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow溢出属性
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow(水平和垂直均设置)
- overflow-x(设置水平方向)
- overflow-y(设置垂直方向)
定位(position)
1,static:默认值
无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
relative(相对定位)
相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物。有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间。对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute(绝对定位)
定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。
另外,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed(固定)
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。
注意:
脱离文档流的3种方式
float
absolute
fixed
z-index
#i {
z-index: 999;
}
设置对象的层叠顺序,数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。
opacity
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
前段---css的更多相关文章
- “耐撕”团队2016.04.12站立会议
1.时间 : 19:15--19:30 共计15分钟. 2.成员 : Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- Web前段优化,提高加载速度 css
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- 前段基础之CSS
本文参考:https://www.cnblogs.com/ctztake/p/7577436.html CSS 语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' select ...
- python之路 前段之html,css
一.HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏 ...
- 前段人员必藏的7 个 CSS 好用的属性绝对干货
学习CSS是构建好看网页的一种方式. 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性. 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西. 因此,在这篇文 ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- 【前段开发】行内元素和块级元素总结(HTML CSS)
块级元素 <address> information on author <blockquote> long quotation <button> push but ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
随机推荐
- 三大操作系统对比使用之·MacOSX
时间:2018-11-13 整理:byzqy 本篇是一篇个人对Mac系统使用习惯和应用推荐的分享,在此记录,以便后续使用查询! 打开终端: command+空格,调出"聚焦搜索(Spotli ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- openresty lua_ssl_trusted_certificate 问题
lua_ssl_trusted_certificate 语法: lua_ssl_trusted_certificate 默认: no 环境: http, server, location 指定一个 P ...
- [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型
[源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 目录 [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 0x00 摘要 0x01 前言 1.1 改 ...
- PPPoE技术白皮书(H3C)
PPPoE技术白皮书 关键词:PPP,Ethernet,PPPoE 摘要:PPPoE是一种通过一个远端接入设备为以太网上的主机提供接入服务,并可以对接入的每个主机实现控制和计费的技术.本文介绍了PPP ...
- Fastjson反序列化漏洞基础
Fastjson反序列化漏洞基础 FastJson是alibaba的一款开源JSON解析库,可用于将Java对象转换为其JSON表示形式,也可以用于将JSON字符串转换为等效的Java对象. 0x0 ...
- Linux上合理设置网卡的MTU值
MTU:是网络的最大传输单元,通信术语:最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个 ...
- Elasticsearch(ES)的滚动搜索与批量操作
1. 概述 今天我们来聊一下Elasticsearch(ES)的滚动搜索与批量操作. 2. Elasticsearch(ES)的滚动搜索 2.1 概述 滚动搜索我们经常能够用到,例如:推荐列表,此类 ...
- JDK1.8源码(三)——java.lang.String类
一.概述 1.介绍 String是一个final类,不可被继承,代表不可变的字符序列,是一个类类型的变量.Java程序中的所有字符串字面量(如"abc")都作为此类的实例实现,&q ...
- spring入门1-IOC和DI
1.概述 1.1.简介 Spring是分层的 Java SE/EE应用 full-stack 轻量级开源框架,以 IoC(Inverse Of Control:反转控制)和 AOP(Aspect Or ...