logo logo
RogevnBlog
banner
NEWS LETTER

CSS样式表笔记

Scroll down

CSS样式表

css简介

css全称cascading style sheets

CSS（Cascading Style Sheets）是一种用于控制网页视觉样式的语言。它与 HTML 和 JavaScript 一起构成了现代 Web 开发的三大基石之一。

CSS 的主要作用是将 HTML 文档中的内容和样式分离开来，使得 Web 页面的样式可以在不改变 HTML 内容的情况下进行更改。这就为 Web 设计师提供了更多的自由度和灵活性，同时也使得 CSS 成为了设计 Web 页面时必不可少的工具。

CSS 样式包括颜色、字体、间距、边框、背景等等，通过对这些样式进行定义，我们可以实现各种不同的效果，从而让页面呈现出我们想要的风格和感觉。

CSS 是一门相对简单易学的语言，但它也有其复杂和深入的方面，比如盒模型、浮动和定位等概念。随着 Web 技术的不断发展，CSS 也在不断更新和完善，例如 CSS3 中引入了许多新的特性和属性，使得开发者们能够更加灵活地处理页面布局和样式。

css优点

  1. 实现内容和样式的分离利于团队开发

  2. 实现样式的复用，提高开发效率

  3. 实现样式的精准控制

  4. 更利于搜索引擎搜索

语法结构

1
2
3
4
选择器{
	样式:值;
	样式:值;
}

css基础

css选择器

选择器有三种：标签选择器、类选择器、ID选择器

  • 标签选择器：可直接应用在html标签上
  • 类选择器：可在页面上多次使用
  • ID选择器：在同一个页面上只能使用一次

引入css样式

  1. 行内样式（使用style属性引入css样式）

  2. 内部样式表（css代码写在head中的style标签里）

  3. 外部样式（将下面代码写入head中）

1
<link href="style.css" rel="stylesheet" type="text/css">

css样式优先级

行内>内部>外部

ID选择器>类选择器>标签选择器>全局选择器（*)

css复合选择器

后代选择器 用来选择后代元素 可以是子孙后代 符号是空格.nav a
子代选择器 选择最近一级元素 只选亲儿子 符号是大于.nav>p
并集选择器 选择某些相同样式的 可以用于合并声明 符号是逗号.nav,.header
链接伪类选择 选择不同状态的链接 跟链接相关 重点记住a语和a:hover 实际开发的写法
:focus选择器 选择获得光标的表单 跟表单相关 input:focus记住这个写法
第一元素选择器 选择第一个元素 li:first-child{ }
最后一个元素 选择最后一个元素 li:last-child{ }
指定位置的子元素 选择指定位置的子元素 li:nth=child(3){ }
相邻兄弟选择器 相邻的两个同级标签 div+p{ }
通用兄弟选择器 所有的同级元素 div~p{ }

选择器规范：子标签可以继承父标签的样式

子标签的样式不会影响父标签的结构

css更改字体

属性名 含义 类型 属性值
font-family 设置字体类型 font-family：“隶书”
font-size 文字大小 font-size：12px in英寸 mm毫米 cm厘米 pt点 pc派卡
font-style 字体风格 font-style：italic normal默认值 italic斜体 oblique强制协体
font-weight 字体粗细 font-weight：bold normal默认值 bold 粗体字体 bolder更粗 lighter更细的 100-900 400=默认 700=bold

简写：font:italic bold 36px ‘宋体’；

css更改文本

属性名 描述 属性值
color 文字颜色 #aaa red
text-align 水平对齐 left、right、center
text-indent 首行缩进 20px 2em两个字符
line-height 行高（一般用来垂直居中对齐）
vertical-align 垂直对齐 middle垂直居中 top bottom、baseline基线对齐
text-decoration 文本装饰 underline下划线overline上划线 line-through删除线
text-shadow 文字阴影 text-shadow:颜色，xy位置，模糊值
letter-spacing 字符间距

背景图片

属性 描述 属性值
background-color 背景颜色 #fff transparent背景透明 rgba（255,0,0,0.5）前三个是rgb颜色值 第四个设置透明度0~1 linear-grodient（to right,red,yellow…）背景渐变
background-image 背景图片 url（‘ ’）
background-repeat 背景重复 no-repeat不重复 repeat-x 横向重复 repeat-y纵向重复
background-position 背景定位 x，y x%，y% x，y关键字

简写：background：颜色，图片，重复，定位；

背景渐变

语法：background-image:linear-gradient(angle,color-point,color-point,…);

1、angle

渐变的方向或角度

取值：

to top : 从下向上填充渐变色

to right:从左向右填充渐变色

to bottom:从上向下填充渐变

to left:从右向左填充渐变色

0deg : 0度->to top

90deg: 90度->to right

180deg:180度->to bottom

270deg:270度->to left

2、color-point

色标：表示颜色及其颜色出现的位置

ex

red 0% : 开始的时候是红色

blue 25%:25%的时候变成蓝色

red 0px : 开始的时候是红色

blue 25px:到25px的位置处，变为蓝色

边框

1
2
3
4
5
6
7
8
9
10
11
border-top（1px，red，solid）

	-left

	-right

	-bottom

border-radius：5px,5px,5px,5px;边框圆角

边框样式：none无，hidden隐藏，dotted点线，dashed断线，double双实线

盒子模型

margin:5px 10px 5px 10px;

上右下左的顺序

margin：5px 10px；

上下执行前面的左右执行后面的

margin:5px 15px 20px;

上 左右 下

伪类样式

  • a:link 未点击

  • a:visited 单击后

  • a:hover 鼠标上移

  • a:active 单击未释放

注：若在同一个a标签中设置四个伪类样式需要按以上顺序填写

鼠标指针设置

cursor：

  • default；

  • crosshair

  • wait

  • help

  • text光标 的图像结果text

  • pointer

标准文档流

标准文档流概念：

​ 元素从左往右从上往下排列

标准文档流组成

  1. 行内元素

    1. 设置宽高无效

    2. 对margin仅设置左右有效上下无效，padding设置上下左右都有效，即会撑大空间

    3. 不会自动换行

  2. 块级元素

    1. 能识别宽高

    2. margin和padding的上下左右都有效

    3. 自动换行

  3. 行内块级

    1. 不自动换行

    2. 识别宽高

    3. 默认从左往右

三种元素转换

  • display:inline(转换行内)；
  • block（转换为块级元素);
  • inline-block（转化为行内块级元素）

浮动+div布局

div特点

  1. 块级元素，独占一行

  2. 具有一定宽度和高度

  3. 常用作容器

div浮动

  1. 使用div失去独占一行

  2. 浮动元素紧贴父级标签并与兄弟元素的边框紧贴

  3. 空间不足自动换行

清除浮动

clear：left；左侧不允许出现浮动元素

right；右侧不允许出现浮动元素

both；两侧不允许出现浮动元素

none；允许出现

弹性盒子（Flex）

什么是Flex

任何一个元素都可以指定为flex布局

在设置为flex布局之后子元素的float、clear和vertical-align都将失效

属性及作用

flex-direction：决定主轴的方向（子元素排列顺序）

flex-direction: row | row-reverse | column | column-reverse;

水平起点在左 | 水平起点在右 | 垂直起点在上 | 垂直七点在下

flex-wrap：如果一条轴线排不下如何换行

flex-wrap: nowrap | wrap | wrap-reverse;

不换行 | 换行，第一行在上 | 换行，第一行在下

flex-flow：flex-direction，flex-wrap；

justify-content：主轴对齐方式

justify-content: flex-start | flex-end |center | space-between | space-around;

左对齐 右对齐 居中 两端 分散

align-items：交叉轴对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

align-content：多根轴线对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目（子元素）属性

  • order： 设置项目位置，数字越小越靠前

  • flex-grow：如果存在剩余空间，放大的倍数

  • flex-shrink：如果空间小，缩小的倍数

  • flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间

  • flex:flex-grow,flex-basis,flex-shrink;

  • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

元素溢出处理

  • overflow：visible；默认值内容不会被修剪，会呈现在盒子之外

  • hidden；内容修剪隐藏内容不可见

  • scroll； 内容修剪但浏览器会显示滚动条

  • auto如果内容修剪，则会显示滚动条

定位

  • position：relative；相对定位，相对于自身原来位置偏移

  • absolute；绝对定位：已定位的父级元素为基准

  • 脱标（子绝父相）

  • fixed； 固定定位；相对于浏览器定位

  • 偏移设置：top，left，right，bottom

脱标的三种方式：浮动、绝对定位、固定定位

层级顺序

​ z-index属性：调整元素定位时重叠层的上下位置

  1. z-index属性值，整数默认为0

  2. 设置了position才能设置此属性

  3. z-index值大的在值小的层上方

文字、图片、列表滚动

1
<marquee behavior="alternate" scrollamount='50'>来回弹</marquee>

behavior滚动方式：alternate来回弹

scroll转一圈

slide动一次

infinate=infinate：重复

loop=‘3’：次数

divection=“up”向上

down向下

left向左

right向右

scrolldelay=“10”减速

scrollamount=“10”加快

HTML元素透明度

opacity：0-1；可设置小数

Other Articles
cover
java
SpringBoot笔记
  • 23/06/12
  • 20:17
  • 1.3k
  • 6
cover
前端
Ajax通信技术
  • 23/06/12
  • 17:00
  • 1.5k
  • 6
© 2023- 2023 长生风月
The blog has been lovely to run day