什么是CSS（层叠样式表）

fairy
219 阅读10分钟

概念和使用方式

1、什么是CSS?

    设置文字样式、背景、位置、动画等等。

2、如何在HTML中引入？

行内样式--直接在标签中添加style属性；

如：<p style="color: pink;">段落</p>

内联样式--直接将css内容写入我们<style></style>标签之中，<style></style>标签一般放置在<head></head>结束标记之前。 如：

<head>
    <style>
        p{
            color: pink;
        }
    </style>
</head>

3、外部样式表

从外面的.css文件中引入css文件，一般使用link标签，link标签写在<head></head>的结束之前 如：<link rel="stylesheet" href="index.css">

4、在css中利用@import引入，但是推荐不用

选择器

1、什么是选择器？

选中某一个标签，方便进行标签的样式设计

2、基本选择器：

  • 标签选择器就是标签的名字，代表选中的所有标签。
  • id选择器，利用id="id名" 在当前文件中id是唯一的。在style，css文件中，利用#id 名来定义样式
  • class选择器，利用class="class"名，只要名字一样就可以利用class定义统一的样式。在style，css文件中，利用.class 名来定义样式

写所有样式之前，一定要将浏览器默认的样式删除--主要是解决各大浏览器之间各个标签默认内外间距不等的原因

*{
    margin: 0;
    padding: 0;
}

text-indent: 32px; 段落的首行缩进；

网页中默认字体大小为16像素一个字，首行缩进就是32px；

单位

  • px：像素
  • %：百分比，相对于父级元素的大小
  • em：相对单位，相对于父级元素的字体大小；

例子：css属性

  • font-style:italic;设置字体的斜体；
  • text-decoration:underline;字体修饰为下划线；
  • font-family:"Times New Romain",Times,serif;
  • word-spacing:20px;字间距(单词之间的间距）
  • letter-spacing:20px;每个字,每个字母之间的间距都在发生变化(字间距） 字体设置：如果是多个单词组成的字体，则需要加引号；如果是单个单词的字体，就不需要加引号，如果是中文字体，则必须加引号，建议设置字体的时候，多设置几个，每个字体之间用逗号，隔开，以便于电；脑上有这种字体。

1、文字水平对齐：

text-align: left|right|center|justify;

2、单行文本垂直居中

只需要保证：line-height=height

3、垂直对齐方式

vertical-align:middle(一般要对图片设置这个，文字图片对齐用这个属性设置）

CSS复合选择器

类选择器与ID选择器的区别

  1. ID选择器是有且只能有一个
  2. 类选择器可以有多个

写法：

1、div标签下的p标签的样式

子代选择器 （利用>（小于符合）选择下一级选择器）

div>p{
    color:red
}

2、后代选择器（利用 （空格符合）选择下一级选择器）

div p{
    color:red
}

3、交集：

p标签下，且同时设置了类选择器class=“”的（利用.(点)分隔标签选择器和类选择权，表示不但要是标签选择器，也还要同时设置了类选择器 ）

标签选择器.类选择器{
    color:red;
}

4、并集:

span标签和a标签同时设置样式（利用,(逗号)分隔）

span,a{
    color:red;
}

5、复合选择器（优先级）权重值

!importtant(直接在所想要最高级显示的属性后面加上）：但是不提倡使用 如：

span,a{
    color:red !importtant;
}

6、伪类选择器：比如a标签的四种状态（伪类选择器）

  • a:link 没有点击之前的属性

  • a:visited 点击过后的属性

  • a:hover 鼠标悬停时

  • a:active 鼠标按住时激活 7、通用选择器

    *｛ 属性:值; …… ｝ CSS选择器的优先级： 行内选择器>内部选择器>ID选择器 ID选择器100>类选择器10>标签选择器1（权重值）

默认情况下，所有背景都为透明的。

  • background-color：背景颜色
  • background-image:背景图片
  • background-image:url() no-repeat center；
  • background-repeat：no-repeat;图片不重复；
  • background-position:center;图片居中
  • background-size：800px 300px ;背景图片的大小，宽度加高度 一个也是代表宽高
  • background-size：contain/cover；contain=100%,vaver超出去的会被删除，所以可以用
  • background: url(img/01_Home_07.jpg) no-repeat center;
  • background-size: cover;cover设置背景图片；
  • background-attachment:fixed;背景图片固定； 视差滚动：

:nth-child(){}表示选中第几个元素,如：

p:nth-child(1){
    background：url(a.png) no-repeat center;
｝

颜色值：包含 rgb 十六进制 颜色单词 rgba(a:为透明度0~1之间的小数 ）

一些常见的css属性

  • overflow:hidden;超出父元素区域则隐藏，设置隐藏；
  • text-align:right;不仅仅可以作用于我们的文字，还可以对图片，只要是区域里的内容，都可以起到效果。
  • border-top: 上 右 下 左 transparent；透明
  • .pra2 img:nth-child(odd,even){}；意思是选中img所在父元素的第二个元素为img的元素。
  • 其中的odd是奇数，even是偶数；表示隔行效果
  • .pra2 img:nth-of-type(){2n,2n+1}；选中父元素下的第二个img元素，与上面一个有差别。
  • 其中的2n是偶数，2n+1表示单数
  • 也可以 3n 4n 表示3，4的倍数
  • border-collapse:collapse;折叠边框；
  • cursor: pointer；设置鼠标为手型

1、css语法格式：

class ID 命名：字母 数字，下划线（_），连字符（-）

取名应该语义化（nav、menu）

多行注释：/* */

选择器｛
    属性：属性值；
    属性：属性值；
｝

2、css属性继承

有些设置在父元素中的属性，厚袋子元素也该拥有该属性color font-size line-height 有些设置在父元素上的属性，后代子元素没有该属性 width，height，border，background

文档流

1.1普通文档流

  • 块级标签默认独占一行，从上往下排列，可以设置宽高
  • 内联标签标签无法设置宽高，大小从内容撑开，默认从左往右排列

1.2浮动

  • 作用：浮动能让我们的元素在父元素的左上角排列，直到出现另外的浮动或者另外的边界才会打乱其浮动，向左或者向右排列，如果当前一行排不下是则换行。
  • 写法：float:left||right;
  • 影响：1、元素浮动之后，会脱离文档流，不再占据文档流的位置，所以会产生以下遮盖文档流的效果 2、对浮动元素之后的文档流元素产品影响，对浮动元素之前的文档流内容元素不产生影响。

3、子元素浮动之后，父元素的高度崩塌，就失去的浮动的子元素的高度，就相当于父元素里的文档流中没有浮动的子元素的文档高度。

4、若没有对浮动元素设置宽高，则浮动元素的宽高变为内容的宽高；

5、如果内联标签span设置了浮动，则可以设置宽高，默认是不能的。

1.3清除浮动 clear:left||right||both;

1.4清除浮动对父元素的影响

  • 给父元素设置高度；（在确定知道高度的情况下适用）
  • 在浮动元素之后添加一个同级的新标签，空标签，设置我们的clear:both；可以解决问题（但是不推荐该方法）
  • 给父元素设置浮动；
  • 父元素设置overflow:hidden;超出隐藏 或者 overflow:auto;（在不考虑ie按兼容的情况下以及确保我们内容不会超出时使用。） overflow: hidden:超出隐藏 auto：超出出现滚动条 scroll:无论超出都会出现滚动条；

5、结合伪元素：[hover(伪类选择器）]:before:after(最好解决方案）

.clearfix:before,.clearfix:after{
    display:table; /*将标签类型更改为表格类型*/
    content:'';/*伪元素的内容*/
}
.clearfix:after{
    clear:both;
}

解决浮动的固定模式；class一一对应；

display:inline;

阴影text-shadow:0 0 5px #fff;x轴偏移，y轴偏移， 模糊值，阴影颜色；

1、盒模型分类

  • 标准盒模型（W3C）
  • 现代浏览器采用的默认盒模型-IE盒模型（特别）

2、标准盒模型组成

2.1内容（content）width*height

2.1内边距(padding)

    与background的颜色一样；包裹在内容的外面，是内容与border之间的间隙与距离。
    同样可以设置大小。
    写法：
    padding:10px;代表四个方向，上下左右
    padding:20px 10px;代表上下20px，左右10px；
    padding:10px 20px 30px;代表，上10，左右20，下30px
    padding:10px 10px 10px 10px;代表，上右下左，
    其中border和margin同理
    还可以写为padding-left，padding-right，padding-top；padding-bottom；分别代表一个方向的内边距

2.3边框（border）-- 可以设置大小与颜色，

2.4外边距（margin）-- 透明区域，元素与元素之间的距离，即使大小为0，margin也同样存在

3、结论（盒子的实际大小）

内容大小（width、height）+padding*2+border*2+margin*2

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

例：css属性

text-indent:字符缩进；
overflow:hidden;取消浮动的影响；
outline:none;外轮廓设置为none；去掉input标签的默认边框样式。点击时
border-style:dotted|solid;小圆点，实线
利用outline:none；去掉默认点击或者不点击样式

利用伪类选择器(鼠标点击应用时的css样式)
.btn:active{
background:blue;
color:red;
}

定位

position:absolute||relative;

  • absolute:绝对定位
  • relative:相对定位

absolute:绝对定位

  • 水平方向通过left或者right进行控制；
  • 垂直方向通过top或者bottom来进行控制；
  • 垂直方向通过top或者bottom来进行控制；
  • 设置了绝对定位的元素脱离了文档流，相当于父元素中没有这个元素，相对于父元素的进行定位
  • 默认情况下是相对于body进行绝对定位；
  • 如果定位元素的父级元素（祖先级元素）有相对定位，position:relative；则相对于该元素； relative:相对定位
  • 水平方向通过left或者right进行控制；
  • 垂直方向通过top或者bottom来进行控制；
  • 相对定位的元素是相对于自己原来的位置，本来的位置，如果其他元素移动会影响本来位置，就影响了相对元素（不会脱离文档流）
  • 不会脱离文档流

总结：要使用绝对定位必须对父元素设置相对定位；

fixed:固定定位，相对于浏览器窗口固定的，脱离文档流。

记住：

  • 定位的position>float
  • 可以利用z-index：0|1|-1；来控制层级关系
  • 定位元素的层级关系；利用z-index;但是z-index对于浮动元素float没有用；
  • 可用于对position定位元素来设置。

生效的对象：

  • 只有设置了定位的元素才可以使用。（relative，absolute，fixed）
  • 如两个元素重合时，在垂直方向会对两个设置了margin相邻的一边选择最大值，不会两个都出现

补充：margin的问题

在垂直方向上，两个元素的margin相遇后，会取最大值

如果子元素和父元素之间没有内容，则元素设置的margin-top会作用在父元素身上。

解决方法

  • 给父元素设置border（边框）
  • 给父元素设置padding
  • 给父元素设置浮动（其中还要给父元素或者子元素设置宽度）
  • 给父元素设置overflow:hidden;（子元素超出以后会隐藏）--推荐使用
avatar
文章
阅读
粉丝