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的更多相关文章

  1. “耐撕”团队2016.04.12站立会议

    1.时间 : 19:15--19:30  共计15分钟. 2.成员 : Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客:ht ...

  2. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. Web前段优化,提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. 前段基础之CSS

    本文参考:https://www.cnblogs.com/ctztake/p/7577436.html CSS 语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' select ...

  5. python之路 前段之html,css

    一.HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏 ...

  6. 前段人员必藏的7 个 CSS 好用的属性绝对干货

    学习CSS是构建好看网页的一种方式. 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性. 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西. 因此,在这篇文 ...

  7. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  8. 【前段开发】行内元素和块级元素总结(HTML CSS)

    块级元素 <address> information on author <blockquote> long quotation <button> push but ...

  9. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

随机推荐

  1. 三大操作系统对比使用之·MacOSX

    时间:2018-11-13 整理:byzqy 本篇是一篇个人对Mac系统使用习惯和应用推荐的分享,在此记录,以便后续使用查询! 打开终端: command+空格,调出"聚焦搜索(Spotli ...

  2. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  3. openresty lua_ssl_trusted_certificate 问题

    lua_ssl_trusted_certificate 语法: lua_ssl_trusted_certificate 默认: no 环境: http, server, location 指定一个 P ...

  4. [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型

    [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 目录 [源码解析] 深度学习流水线并行 PipeDream(3)--- 转换模型 0x00 摘要 0x01 前言 1.1 改 ...

  5. PPPoE技术白皮书(H3C)

    PPPoE技术白皮书 关键词:PPP,Ethernet,PPPoE 摘要:PPPoE是一种通过一个远端接入设备为以太网上的主机提供接入服务,并可以对接入的每个主机实现控制和计费的技术.本文介绍了PPP ...

  6. Fastjson反序列化漏洞基础

    Fastjson反序列化漏洞基础 FastJson是alibaba的一款开源JSON解析库,可用于将Java对象转换为其JSON表示形式,也可以用于将JSON字符串转换为等效的Java对象. 0x0 ...

  7. Linux上合理设置网卡的MTU值

    MTU:是网络的最大传输单元,通信术语:最大传输单元(Maximum Transmission Unit,MTU)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位).最大传输单元这个 ...

  8. Elasticsearch(ES)的滚动搜索与批量操作

    1. 概述 今天我们来聊一下Elasticsearch(ES)的滚动搜索与批量操作. 2. Elasticsearch(ES)的滚动搜索 2.1 概述  滚动搜索我们经常能够用到,例如:推荐列表,此类 ...

  9. JDK1.8源码(三)——java.lang.String类

    一.概述 1.介绍 String是一个final类,不可被继承,代表不可变的字符序列,是一个类类型的变量.Java程序中的所有字符串字面量(如"abc")都作为此类的实例实现,&q ...

  10. spring入门1-IOC和DI

    1.概述 1.1.简介 Spring是分层的 Java SE/EE应用 full-stack 轻量级开源框架,以 IoC(Inverse Of Control:反转控制)和 AOP(Aspect Or ...