CSS样式

2023-10-25 14:43:53 浏览数 (1)

CSS样式

引入方式

内联样式：

代码语言：javascript复制
<p style="background: orange; font-size: 24px;">CSS<p>

内部样式：

代码语言：javascript复制
<head>
    <style> 
       h1 { 
           background: red; 
       } 
    </style>
</head>

外部样式：

代码语言：javascript复制
<link rel="stylesheet" type="text/css" href="xxx.css">

选择器

全局选择器：

代码语言：javascript复制
*{
     margin: 0;
     padding: 0;
 }

元素选择器：HTML文档中的元素，p、b、div、a、img、body等。

代码语言：javascript复制
p{
    font-size:14px;
}

类选择器：

代码语言：javascript复制
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
	width:800px;
}

ID选择器：针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

代码语言：javascript复制
<h2 id="mytitle">你好</h2>
#mytitle{
    border:3px dashed green;
}

合并选择器：

代码语言：javascript复制
.header, .footer{
    height:300px;
}

选择器的优先级：

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

color：规定文本的颜色

代码语言：javascript复制
div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}  #（a）取值 0~1 之间， 代表透明度

font-size：设置文本的大小，最小字体是12px

代码语言：javascript复制
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

font-weight：设置文本的粗细

值

描述

bold

定义粗体字符

bolder

定义更粗的字符

lighter

定义更细的字符

100~900

定义由细到粗 400等同默认，而700等同于bold

代码语言：javascript复制
H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style：指定文本的字体样式

值

描述

normal

默认值

italic

定义斜体字

font-family：属性指定一个元素的字体，每个值用逗号分开

代码语言：javascript复制
font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性：

属性

描述

background-color

设置背景颜色

background-image

设置背景图片

background-position

设置背景图片显示位置

background-repeat

设置背景图片如何填充

background-size

设置背景图片大小属性

background-repeat属性：

值

说明

repeat

默认值

repeat-x

只向水平方向平铺

repeat-y

只向垂直方向平铺

no-repeat

不平铺

background-size属性：

值

说明

length

设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto

percentage

计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto

cover

保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小

contain

保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

background-position属性：该属性设置背景图像的起始位置，其默认值是：0% 0%

值

说明

left top

左上角

left center

左 中

left bottom

左 下

right top

右上角

right center

右 中

right bottom

右 下

center top

中 上

center center

中 中

center bottom

中 下

x% y%

第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%

xpos ypos

单位是像素

代码语言：javascript复制
.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

文本属性

text-align：指定元素文本的水平对齐方式

值

描述

left

文本居左排列，默认值

right

把文本排列到右边

center

把文本排列到中间

text-decoration：text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等

值

描述

underline

定义下划线

overline

定义上划线

line-through

定义删除线

text-transform：text-transform 属性控制文本的大小写

值

描述

captialize

定义每个单词开头大写

uppercase

定义全部大写字母

lowercase

定义全部小写字母

text-indent：text-indent 属性规定文本块中首行文本的缩进

代码语言：javascript复制
p{
	text-indent:50px;
}

如果值是负数，将第一行左缩进

表格属性

表格边框：指定CSS表格边框，使用border属性

代码语言：javascript复制
table, td { 
    border: 1px solid black; 
}           粗细  样式   颜色

折叠边框：border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

代码语言：javascript复制
table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格文字对齐：表格中的文本对齐和垂直对齐属性，text-align属性设置水平对齐方式，向左，右，或中心

代码语言：javascript复制
td { text-align:right; }
td { height:50px; vertical-align:bottom; }

表格填充：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

代码语言：javascript复制
td { padding:15px; }

表格颜色：下面的例子指定边框的颜色，和th元素的背景和文本颜色

代码语言：javascript复制
table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

关系选择器

后代选择器：选择所有被E元素包含的F元素，中间用空格隔开

代码语言：javascript复制
<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul>
 <ol>
     <li>奥迪</li>
</ol>
代码语言：javascript复制
ul li{
    color:green;
}

子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

代码语言：javascript复制
<div> 
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>
代码语言：javascript复制
div>a{
    color:red
}

相邻兄弟选择器：选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

代码语言：javascript复制
<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>
代码语言：javascript复制
h1 p{
    color:red;
}

通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

代码语言：javascript复制
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
代码语言：javascript复制
h1~p{
    color:red;
}

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

  1. Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
  2. Border(边框) - 围绕在内边距和内容外的边框
  3. Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
  4. Content(内容) - 盒子的内容，显示文本和图像

弹性盒模型

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

弹性盒子只定义了弹性子元素如何在弹性容器内布局

CSS3弹性盒内容：

  1. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
  2. 弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
  3. 弹性容器内包含了一个或多个弹性子元素
代码语言：javascript复制
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
</div>
<style>
    .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>
父元素上的属性

display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列

flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置

代码语言：javascript复制
flex-direction: row | row-reverse | column | column-reverse
  1. row：横向从左到右排列（左对齐），默认的排列方式
  2. row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
  3. column：纵向排列
  4. column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

justify-content 属性：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

代码语言：javascript复制
justify-content: flex-start | flex-end | center
  1. flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
  2. flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
  3. center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

align-items 属性：align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

代码语言：javascript复制
align-items: flex-start | flex-end | center
  1. flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
  2. flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
  3. center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
子元素上的属性

flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

代码语言：javascript复制
<div class="flex-container">
    <div class="flex-item1">flex item 1</div>
    <div class="flex-item2">flex item 2</div>
    <div class="flex-item3">flex item 3</div> 
</div>
<style>
	.flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: gold;
    }
    .flex-item1 {
        height: 150px;
        background-color: red;
        flex: 1;
    }
    .flex-item2 {
        height: 150px;
        background-color: green;
        flex: 2;
    }
    .flex-item3 {
        height: 150px;
        background-color: blue;
        flex: 1;
    }
</style>

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间；标准流里面的限制非常多，导致很多页面效果无法实现

  1. 高矮不齐，底边对齐
  2. 空白折叠现象
    1. 无论多少个空格、换行、tab，都会折叠为一个空格
    2. 如果我们想让img标签之间没有空隙，必须紧密连接

使⼀个元素脱离标准文档流有三种方式

  1. 浮动
  2. 绝对定位
  3. 固定定位

浮动

float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

值

描述

left

元素向左浮动

right

元素向右浮动

浮动的原理：

  1. 浮动以后使元素脱离了文档流
  2. 浮动只有左右浮动，没有上下浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足以横向摆放内容时候，会在下一行摆放

清除浮动

浮动副作用：

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动

  1. 浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
代码语言：javascript复制
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种：

  1. 父元素设置高度
  2. 受影响的元素增加clear属性
  3. overflow清除浮动
  4. 伪对象方式
overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

父级标签的样式里面加: overflow:hidden;clear: both;

代码语言：javascript复制
.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}
伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容，并且使用clear:both;

代码语言：javascript复制
.container {
    width: 350px;
    border: 1px solid red;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}

定位

position 属性指定了元素的定位类型

值

描述

relative

相对定位

absolute

绝对定位

fixed

固定定位

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom

相对定位，改变位置的参照物是自己原来的位置，不脱标，占位，原来的位置依旧是它的。

绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

固定定位永远都会相对于浏览器窗口进行定位 ，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

CSS3新特性

border-radius 属性，可以使用以下规则：

  1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
  2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  4. 一个值： 四个圆角值相同

阴影：box-shadow 向框添加一个或多个阴影。

代码语言：javascript复制
box-shadow: h-shadow v-shadow blur color;

值

描述

h-shadow

必选，水平阴影的位置

v-shadow

必选，垂直阴影的位置

blur

可选，模糊距离

color

可选，阴影的颜色

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

使用@keyframes规则，你可以创建动画：

代码语言：javascript复制
@keyframes name {
    from|0%{
    	css样式
    }
    percent{
    	css样式
    }
    to|100%{
    	css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画：

代码语言：javascript复制
animation: name duration timing-function delay iteration-count direction;

值

描述

name

设置动画的名称

duration

设置动画的持续时间

timing-function

设置动画效果的速率（如下）

delay

设置动画的开始时间（延时执行）

iteration-count

设置动画循环的次数，infinite为无限次数的循环

direction

设置动画播放的方向（如下）

animation-play-state

控制动画的播放状态：running代表播放，而paused代表停止播放

timing-function值

描述

ease

逐渐变慢（默认）

linear

匀速

ease-in

加速

ease-out

减速

ease-in-out

先加速后减速

direction值

描述

normal

默认值为normal表示向前播放

alternate

动画播放在第偶数次向前播放，第奇数次向反方向播放

代码语言：javascript复制
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}
 ease-out          | 减速             |
| ease-in-out       | 先加速后减速     |

| direction值 | 描述                                             |
| ----------- | ------------------------------------------------ |
| normal      | 默认值为normal表示向前播放                       |
| alternate   | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |

~~~css
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}
css 容器 表格 布局 动画

0 人点赞