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. 用tinyxml2读写xml文件_C++实现

    下载源代码 开源代码github地址: https://github.com/leethomason/tinyxml2 添加工程文件 将源代码目录中 tinyxml2.h 和 tinyxml2.cpp ...

  2. Ubuntu16.04 Linux 下安装、配置SSH

    本人在Win7+VMware下利用两个ubuntu虚拟机安装.配置.测试了SSH. 在Server端安装openssh-server. sudo apt-get install ssh # 安装ssh ...

  3. 紫色飞猪的研发之旅--06go自定义状态码

    在实际开发中,需要前后端需要协商状态码,状态码用于后端返前端时使用.在一个团队中,定义的状态码讲道理应该是一致的,项目开始的起始阶段状态码应该是定义了个七七八八的,随着功能的叠加而不断增加.此系列将围 ...

  4. vue ele 表单规则校验俩次输入密码是否相同，校验手机号 （ 前端小课堂：小细节，大进步 ）

     这个是密码的拦截 : [{ required: true, validator: validatePass4, trigger: "blur" }],   同级关系下写下方法,类 ...

  5. RabbitMQ之消息模式2

    消费端限流 什么是消费端的限流? 假设一个场景,首先,我们RabbitMQ服务器有上万条未处理的消息,我们随便打开一个消费者客户端,会出现下面情况: 巨量的消息瞬间全部推送过来,但是我们单个客户端无法 ...

  6. Java并发知识总结，超详细！

    首先给大家分享一个github仓库,上面放了200多本经典的计算机书籍,包括C语言.C++.Java.Python.前端.数据库.操作系统.计算机网络.数据结构和算法.机器学习.编程人生等,可以sta ...

  7. Kubernetes环境Traefik部署与应用

    本作品由Galen Suen采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可.由原作者转载自个人站点. 概述 本文用于整理基于Kubernetes环境的Traefik部署与应用, ...

  8. 第08课：GDB 实用调试技巧（ 上）

    本节课的核心内容: 将 print 打印结果显示完整 让被 GDB 调试的程序接收信号 函数明明存在,添加断点时却无效 将 print 打印结果显示完整 当使用 print 命令打印一个字符串或者字符 ...

  9. Coreos配置docker镜像加速器

    CoreOS配置docker镜像加速器 CoreOS下的Docker配置是通过flannel unit来实现的. 1) 通过命令 systemctl cat docker 可以看出配置文件的默认位置 ...

  10. 转：C#根据条件设置datagridview行的颜色

    1 private void LoadData() 2 { 3 DataTable tblDatas = new DataTable(); 4 tblDatas.Columns.Add("I ...