css的一些相关属性

小茹想睡觉

已于 2022-03-30 14:23:17 修改

阅读量568

点赞数 1

分类专栏： html+css 文章标签： css

于 2022-03-30 14:18:24 首次发布

本文链接：https://blog.csdn.net/Rice_w/article/details/123845169

版权

html+css 专栏收录该内容

3 篇文章 4 订阅

订阅专栏

1、css基础知识

1.1、css样式

css带吗作为网页的独立的模块存在，要将编写好的出啥事应用于HTML标签，使其产生效果，必须将与HTML标签关联。具体关联方式有三种：行内样式表、内部样式表和外部样式表。

行内样式表

行内样式表就是将css代码放置在HTML代码内部，作为HTML标签的属性存在，HTML代码与出啥事代码处于同一行中。
```
<a href="#" style="color:red;font-size:10px;">日用百货</a>

```

内部样式表

内部样式表也称为内嵌样式表，是指 CSS 代码内嵌到 HTML 代码中，二者处于同一个文件中，通常 CSS 代码放置在 HTML 代码的标签内部。

<head>
    <!--charset="UTF-8"表示当前文档采用字符集中 utf-8,支持中文-->
    <meta charset="UTF-8">
    <title>内部样式表</title>
    
    <!--内部样式表 代码要放置在 style 标签内-->
    <style type="text/css">
        div{
         color:red;
        }
    </style>
</head>

外部样式表

外部样式表是指 CSS 代码完全独立出来，单独放置在扩展名为.css 的文件中，在 HTML文件中，将 CSS 文件引入进来，形成关联。

<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="css/ch05.css" />
</head>

三种样式的优先级

行内样式表>内部样式表>外部样式表

注意：CSS 优先级是指当 CSS 声明发生冲突时，即将在两个不同位置，对同一 HTML 标签进行同样的 CSS 属性定义，但取值不同。优先采用的属性值通常是按就近原则来进行取值，即行级样式表>内部样式表>外部样式表。

1.2、css选择器

选择器	选择器名称	优先级
*{}	通用选择器	最低，低于所有选择器
HTML 标签名{样式属性:样式属性值;……}	标签选择器	高于通用选择器
.类名称{}	类选择器	高于标签选择器
#id 名称{}	id选择器	高于类选择器
选择器 1 选择器 2 选择器 3……{}	后代选择器
选择器 1>选择器 2>选择器 3……{}	子代选择器
选择器 1 选择器 2……{} ，选择器之间没有分隔符	交集选择器
选择器 1,选择器 2,……{} ，选择器之间用逗号分隔	并集选择器
选择器名称：伪类状态{}	伪类选择器

伪类选择器常见伪类状态

link: 未访问状态
visited: 已访问状态
hover: 鼠标指向时，即悬停在元素上方时
active:激活选定状态（鼠标点下去没松开）
focus: 获得焦点时（input 常用）。超链接多种伪类共存时的顺序如下：l

超链接多种伪类共存时的顺序如下：link→visited→hover→active

2、css常用属性

2.1、字体、字号与颜色属性

1. 字体

font-family:字体族，设置字体
- 衬线体 Serif
- 非衬线体 Sans-serif（常用）
- 等宽体 Monospace
font-style :设置字体样式
- nomoral 正常
- italic斜体
font 缩写形式

font 的缩写形式依次为 font-style、font-weight、font-size/line-height、font-family，分别是字体样式、字体粗细、字号/行高、字体族。

2. 字号

font-weight:设置字体粗细
font-size：设置字体大小

3. 字体颜色

color：设置字体颜色

三种表达方式
- 直接写颜色的英文名字：red、yellow、blue等
- 十六进制写法：#FFFFFF
- rgb写法
  - rgb(0～255,0～255,0～255)
  - rgba(0～255,0～255,0～255,0～1) 第 4 位数表示透明度，0 表示全透明，1 表示不透明。
opacity：设置透明度

范围0~1

使用opacity时当前元素以及子元素均会透明；而使用rgba调整时，只会使当前元素透明，不会改变子元素透明度

2.2、文本属性

line-height 设置行高
text-align 设置块级元素中文字的水平对齐方式，属性值有left、center、right。
letter-spacing ：设置字符间距
text-decoration ：文本修饰属性，常用属性值有四个，分别为下画线 underline、删除线 line-through、上画线 overline、不做修饰 none。
overflow（overflow-x 和 overflow-y）

控制超出范围文本的显示方式，常用属性值有以下三个

1）auto：根据文字多少自动显示滚动条。

2）scroll：始终显示滚动条。

3）hidden：超出范围文本隐藏，可以通过 overflow-x 和 overflow-y 分别设置水平垂直方向的隐藏。
text-overflow

设置多余文字的显示方式，常用属性值有两个。

1）clip：裁剪文本；

2）ellipsis：使用省略号代替多余文字。
white-space 设置元素内的空白符怎样处理。常见属性值如下：

1）normal：默认，空白会被浏览器忽略。

2）nowrap：设置中文行末不断行显示。

3）pre：空白会被浏览器保留。作用类似 HTML 中的

如何让每多余文字显示省略号
1. white-space：nowrap；如果是中文，需设置行末不断行
2. overflow：hidden；设置空间超出范围隐藏
3. text-overflow: ellipsis;设置多余文本省略号显示
text-shadow 文本阴影，有四个属性值

1）水平阴影距离：必写，数值越大，阴影右移。

2）垂直阴影距离：必写，数值越大，阴影下移。

3）阴影模糊距离：可写，数值越大，阴影越模糊。默认为 0，不模糊。

4）阴影颜色：可写，默认为黑色。
text-index 首行缩进
text-stoke 设置文字描边

设置文字描边，需要注意的是 text-stroke 只能在 webkit 内核浏览器中使用，所以必须使用“-webkit-”前缀，共接收两个属性值分别为描边的粗细，描边的颜色。

2.3、css其他常用属性

列表常用属性

list-style规定列表的样式，即每个列表项前的标志

超链接样式属性

a:link {color:#FF0000;} 				/* 未被访问的链接 */
a:visited {color:#00FF00;} 				/* 已被访问的链接 */
a:hover {color:#FF00FF;} 				/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}				 /* 正在被单击的链接 */

当为链接的不同状态设置不同样式时，请按照如下次序（规则）使用：

1）a:hover 必须位于 a:link 和 a:visited 之后。

2）a:active 必须位于 a:hover 之后。

3、css新增属性与选择器

3.1、css过渡与变化

3.1.1 transition：过渡属性

transition-timing-function 是指过渡效果的运行速度，以下是可以选择的值：

1）ease：（逐渐变慢）默认值。

2）linear：（匀速）。

3）ease-in：（加速）。

4）ease-out：（减速）。

5）ease-in-out：（加速然后减速）。

3.1.2、transform：变换属性

常见的transform属性值

属性值	作用
none	元素不进行变换
translate(x,y)	定义 2D 平移变换
translate3d(x,y)	定义 3D 变换
translateX(x)	定义沿 X 轴平移变换，Y 轴与 Z 轴同理
scale(x,y)	定义 2D 缩放变换
scale3d(x,y,z)	定义 3D 缩放变换
scaleX(x)	通过设置 X 轴的值来进行缩放，Y 轴与 Z 轴同理
rotate(angle)	定义 2D 旋转，角度值后需跟角度单位 deg
skew(x-angle,y-angle)	定义沿着 X 轴和 Y 轴的 2D 倾斜转换

transform-origin

transform-origin 设置旋转元素的基点位置，2D 转换元素可以改变元素的 X 轴和 Y 轴；对于 3D 转换元素还可以更改元素的 Z 轴。 transform-origin 的属性值有三个：

1）x-axis，可以使用的值有：left、right、center、**px、百分比。

2）y-axis，可以使用的值有：left、right、center、**px、百分比。

3）z-axis，可以使用的值有：**px。

3.2、CSS3动画

1.使用@keyframes创建关键帧动画

基本语法如下：

 @keyframes 动画名称{ 
 	阶段 1{CSS 样式} 
 	阶段 2{CSS 样式} 
 	阶段 3{CSS 样式} 
 }

动画中阶段的写法有两种方式：

每个阶段用百分比表示，从0%到100%（起始必须设置，即0%和100%）。
使用from和to表示从某阶段到某阶段

2.使用animation调用关键帧动画

基本语法如下：

div{
	/* 让 div 调用 myFrame1 这个关键帧动画，5s 完成所有动画效果*/
	animation: myFrame1 5s;
}

animation属性：

1．animation

除 animation-play-state 之外的所有动画属性的简写属性，可以设置多个动画，每个动画之间用空格分隔。

2．animation-name

规定 @keyframes 动画的名称。

3．animation-duration

规定完成一个动画所需的秒或毫秒，默认是 0。

4．animation-timing-function

规定动画的速度曲线。常用属性值有以下五个。

1）linear：动画从头到尾的速度是相同的。

2）ease：默认值，动画以低速开始，然后加快，在结束前开始变慢。

3）ease-in：动画以低速开始，然后逐渐加快至匀速直到结束。

4）ease-out：动画以匀速开始到低速结束。

5）ease-in-out：动画以低速开始和结束。

5．animation-delay

规定动画何时开始，默认是 0。

6．animation-iteration-count

规定动画被播放的次数，默认是 1。使用 infinite 表示无限次播放。

7．animation-direction 规定动画在下一次循环中是否轮流反向播放。属性值有两个。

1）normal：默认值，动画正常播放。

2）alternate：动画轮流反向播放。

8．animation-play-state

规定动画是否正在运行或暂停。其属性值也有两个。

1）paused：设置动画暂停。

2）running：设置动画正在播放。

9．animation-fill-mode 规定对象动画时间之外的状态。常用属性值有三个。

1）none：不改变默认行为。

2）forwards：停留在动画结束状态。

3）backwards：停留在动画开始状态。

3.3、CSS其他属性

3.3.1、css渐变效果

渐变包括线性渐变和径向渐变，有四个属性可以设置：

1）linear-gradient：用线性渐变创建图像。

2）radial-gradient：用径向渐变创建图像。

3）repeating-linear-gradient：用重复的线性渐变创建图像。

4）repeating-radial-gradient：用重复的径向渐变创建图像。

线性渐变的属性值

1）position：设置渐变的圆心位置，可取的值有 left、right、top、bottom、center，还有数值与百分数（可以为负值）。

2）shape：用于定义渐变的形状，circle 是圆形渐变，ellipse 是椭圆形渐变。

3）size：主要用来确定径向渐变的结束形状大小，可取的值有 closest-side、closestcorner、farthest-side、farthest-corner，默认为 farthest-corner。

4）color-stop：设置渐变的终止颜色。

3.3.2、css多列属性

属性	作用
columns	列的宽度与列数的简写属性
column-count	规定元素被分隔的列数
column-width	规定每个列的宽度
column-rule	设置每个列之间边框的宽度、样式和颜色，为简写属性
column-rule-width	规定两列间边框的宽度
column-rule-style	规定两列间边框的样式
column-rule-color	规定两列间边框的颜色
column-gap	设置每个列之间的距离

3.4、css新增选择器

3.4.1、属性选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div p[title]{ /* 选择具有title属性的p元素 */
            color: rgb(130, 50, 206);
        }
        #div option[seleted="seleted"]{
            /* 选择具有selected属性且属性值selected的option元素 */
            color: white;
        }
        #div option[selected^="sel"]{
            /* 选择具有selected属性且属性值为以sel开头的字符串的option元素 */
            background-color: pink;
        }
        #div option[disabled$="led"]{
            /*选择具有 disabled 属性且属性值为以 led 结尾的字符串的 option 元素。*/
            background-color: greenyellow ;
        }
        #div option[disabled*="ed"]{
            /*选择具有 disabled 属性且属性值包含 ed 结尾的字符串的 option 元素。*/
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="div">
        <p title="study">前端学习</p>
        <select name="kuangjia">
            <option value="框架">框架</option>
            <option selected="selected">Bootstrap</option>
            <option disabled="disabled">Jquery</option>
            <option value="">AngularJS</option>
        </select>
    </div>
</body>
</html>

在这里插入图片描述

3.4.2、结构伪类选择器

在这里插入图片描述

3.4.3、状态伪类选择器

3.4.4、其他选择器

在这里插入图片描述

4、CSS盒模型与浮动定位

标准盒模型示意图：

在这里插入图片描述

IE盒模型

在这里插入图片描述

可以看到标准盒模型中 height 是只代表content的高度，而IE盒模型height=content+padding+border；同时width也是一样的

小茹想睡觉

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css的一些相关属性

1、css基础知识1.1、css样式css带吗作为网页的独立的模块存在，要将编写好的出啥事应用于HTML标签，使其产生效果，必须将与HTML标签关联。具体关联方式有三种：行内样式表、内部样式表和外部样式表。行内样式表行内样式表就是将css代码放置在HTML代码内部，作为HTML标签的属性存在，HTML代码与出啥事代码处于同一行中。<a href="#" style="color:red;font-size:10px;">日用百货</a><!--产生一个红色的，字
复制链接

扫一扫