CSS

目录

CSS

一、用法

层叠样式表（Cascading Style Sheets）

用来写样式。

样式用来定义HTML元素是如何显示的。

通常储存与外部文件

1、注释

用  /**/  注释

/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

2、语法结构

选择器 {属性1:属性值1;属性2:属性值;}

3、CSS文件的引入方式

  1. 通过link标签引入外部的css文件（最正规用法）
  2. 直接在HTML页面上的head内通过style标签直接书写css代码
  3. 行内式（直接在标签内部通过style属性直接书写）（不推荐使用）
<!--1-->
<link rel="stylesheet" href="css文件地址">

<!--2-->
<style>
    h1 {
        color: green;
    }
</style>

<!--3-->
<h1 style="color: orange">行内css代码4</h1>

4、CSS查找

4.1 基本选择器

  1. 元素选择器(标签选择器)
  2. id选择器
  3. 类选择器
  4. 通用选择器（不推荐）
/*1.元素选择器 直接写标签名字即可 */
span {color: hotpink;}

/*2.id选择器   #+id值 */
#d1 {color: green;}

/*3.类选择器   .+类值 */
.c1 {color: pink;}

/*4.通用选择器  *(了解) */
* {color: orange;}

4.2 组合选择器

/*后代选择器  只要在标签内部都算作该标签的后代 空格表示后代*/
div span {color: red;}
/*儿子选择器 大于号表示儿子 中间不能套着其他标签*/
div>span {color: green;}
/*弟弟选择器  同级别下面所有的*/
div~span {color: orange;}
/*毗邻选择器 紧挨着的同级别下面的那一个*/
div+span {color: aqua;}

4.3 属性选择器

为拥有指定属性的 HTML 元素设置样式

<head>
    <meta charset="UTF-8">
    <title>练习选择器</title>
    <style>
		/*1.含有某个属性名的标签*/
        [username]{color: #98d0ed}
        /*2.含有某个属性名并且属性值是...的标签*/
        [username=aaa]{color: #98d0ed}
        /*3.找p标签并且含有某个属性名并且属性值是...的标签*/
        span[username=aaa] {color: #98d0ed}
    </style>
</head>
<body>
<div>
    <p username="aaa">p1</p>
    <p username="bbb">p2</p>
    <span username="ccc">s1</span>
    <span username="aaa">s2</span>
</div>
</body>

4.4 伪类选择器

a标签有四种状态：

  1. 没有被点击过的时候
  2. 鼠标悬浮上面的时候
  3. 点击下去还没有放手的时候
  4. 点击完松手了，跳转页面了，再看这个链接的时候

用来清除浮动带来的负面影响，可以通过css添加文本内容

a:link {color: red;}
a:hover {*/color: black;}
a:active {color: orange;}
a:visited {color: pink;}
input:focus {background-color: orange;}
span:hover {background-color: pink;}

4.5 选择器优先级

  1. 选择器相同时：（引入方式不同）

    遵循就近原则，谁离标签更近，就听谁的

  2. 选择器不同时：

    行内选择器 > id选择器 > 类选择器 > 元素选择器

4.6 分组与嵌套

分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

#d1 {color: red;}
.c1 {color: red;}
p {color: red;}


#d1,.c1,p {color: orange;}

二、、CSS样式

1. CSS尺寸属性

只有块级标签才可以设置长长宽。

行内标签的样式仅仅取决于内部文本值，所以不能设置长宽。

  1. height：设置元素的高度
  2. width：设置元素的宽度。

2. CSS颜色

设置方式：{color:颜色数据}

颜色数据设定方式：

  1. 颜色英文 red

  2. 06a0de 直接用pycharm提供的取色器取色即可

  3. rgb(1,1,1) 可以利用截图软件获取三基色数字
  4. rgba(0,128,128,0.9) 最后一个数字用来调节颜色的透明度

3. CSS字体属性

  1. 使用font-family属性定义文本的字体系列。
body {font-family: "Microsoft Yahei", "微软雅黑","Arial", sans-serif}
  1. 使用font-size属性定义文本的字体大小。
p {font-size: 14px;}
  1. 使用font-weight属性定义文本的字体粗细。

默认为normal，bold为粗体，lighter为细体。

p{font-weight: lighter;}

4. CSS文本属性

4.1 对齐方式

text-align用来定义文本的水平对齐方式。

text-align:left  左边对齐 默认值

text-align:right  右对齐

text-align:center  居中对齐

text-align:justify  两端对齐,最后一行不参与对齐

4.2 文本划线

text-decoration 用来给文字添加特殊效果。

text-decoration:none   啥也没有，默认格式
text-decoration:underline   定义文本下有一条线。
text-decoration:overline   定义文本上有一条线。
text-decoration:line-through   定义穿过文本中间的一条线

a标签默认自带一条下划线，常用text-decoration: none将a标签的下划线删除

4.3 首行缩进

text-indent 用来将文本首行缩进，后面接像素值。

将段落的第一行缩进 32像素：
text-indent: 32px;

5. CSS背景属性

背景属性支持简写

background:#336699 url('1.png') no-repeat left top;

5.1 背景颜色

background-color:颜色值

background-color: red;  设置背景色为红色

5.2 背景图片

background-image: url(‘图片地址’);

5.3 背景重复

background-repeat 用来设置背景图片是否可以重复平铺

background-repeat:repeat   背景图片平铺排满整个网页(默认)
background-repeat: repeat-x   背景图片只在水平方向上平铺
background-repeat: repeat-y   背景图片只在垂直方向上平铺
background-repeat: no-repeat   背景图片不平铺

5.4 背景位置

background-position 用来设置图片位置

background-position: center center;   图片从中间开始显示，向外扩展（center，left，top）
background-position: 10px 50px;   左、上离边框的距离

5.5 背景图片防止滚动

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过background-attachment属性来防止图片滚动，它的默认值为scroll，即默认滚动。

background-attachment:fixed  即可防止图片滚动了

三、CSS框模型(盒子模型)

CSS框模型定义了元素边框的范围：margin(外边框),border(边框),padding(内边框)这三种边框以及Content(元素本身)。

1. 边框属性

每一种边框都含有三种属性：width(宽度)、style(样式)、color(颜色)。

style有none(无边框),dotted(点状虚线边框),dashed(矩形虚线边框),solid(实线边框)四种。

边框可以统一设置，也可以分开来设置，单独设置某一边的边框。

border: solid 10px red; 
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

2. 边框倒圆角

用border-radius可以将边框倒圆角，属性值为倒圆角的半径。

div {
    border: 1px solid black;
    background-color: red;
    height: 200px;
    width: 200px;
    border-radius: 50%;  设置半径为方形边框的一半，可以得到一个圆
}

3. 盒子模型

  • margin:用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • Border(边框):围绕在内边距和内容外的边框。
  • padding:用于控制内容与边框之间的距离。
  • Content(内容):盒子的内容，显示文本和图像。
.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}
等价于：
.margin-test {margin: 5px 10px 15px 20px;} 上右下左
.mycenter {margin: 0 auto;} 一般margin居中
margin: 15px;  /*只写一个参数 上下左右全是*/
margin: 10px 20px;  /*第一个控制的上下  第二个是左右*/
margin: 10px 20px 30px;  /*第一个控制的上  第二个是左右 第三个是下*/


.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}
.padding-test {padding: 5px 10px 15px 20px;}上右下左

四、CSS的display属性

display属性用来控制HTML元素的显示效果。

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

1. display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

五、CSS浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1. float的取值

有三种：

  1. left：向左浮动
  2. right：向右浮动
  3. none：默认值，不浮动

2. 解决浮动带来的父标签塌陷

浮动的元素，是脱离正常文档流的(原来的位置会让出来)。可以使用clear来清除浮动带来的影响。

.clearfix:after {
    content: '';
    clear: both;  /*左右两边都不能有浮动的元素*/
    display: block;
}

哪个父标签塌陷了,就给谁加clearfix这个类属性值.

3. overflow属性溢出

有时候元素框的范围很小，元素的内容又很多，这时候元素的数据就会溢出元素框。这个时候可以使用overflow来解决这个问题。

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
  • overflow（水平和垂直均设置）
  • overflow-x（设置水平方向）
  • overflow-y（设置垂直方向）

六、CSS定位

所有的标签默认都是静态的，无法改变位置。此时可以用position属性来改变标签的位置。

  1. 默认定位 position: static;

    必须将静态的状态修改成定位之后

  2. 相对定位(了解) position: relative

    相对于标签原来的位置 移动

  3. 绝对定位(小米的购物车) position: absolute

    相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位(******)

  4. 固定定位(回到顶部) position: fixed

    相对于浏览器窗口 固定在某个位置不动

七、z-index控制z轴

z-index: 数字; 用来控制层面的高度，越高越显示在前面

八、透明度

opacity: 数字（0~1）

posted @ 2019-11-14 21:59  Donner  阅读(150)  评论(0)  编辑  收藏  举报