基础CSS

最新推荐文章于 2024-06-14 14:36:26 发布

sxx鸟人

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量103

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46912246/article/details/117362565

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS

1.使用步骤
- 1.1 使用格式
- 1.2 CSS的引入方式
2. 选择器：
- 2.1 基础选择器
- 2.2 复合选择器
3. CSS字体属性
4. 文本属性（定义text文本的外观）
5. CSS元素显示模式
6.CSS背景
7. emmet语法（vscode软件）
8. CSS三大特征：
9. 盒子模型

1.使用步骤

1.1 使用格式

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

1.2 CSS的引入方式

（1）行内样式表（行内式）
在标签中定义属性style后面属性值中间用；隔开：
<div style="display: inline-block;color: blue;">
（2）内部样式表（嵌入式）
css代码放入head双标签里面的style双标签中。

<head>
		<meta charset="utf-8">
		<title>css嵌入式</title>
		<style>
			div {
				color: pink;
			}
		</style>
</head>

（3）外部样式表
在外部单独创建一个CSS文件，将CSS文件引入HTML页面中去。
第一步：创建一个后缀为.css的文件，将所有CSS代码放入其中。
第二部：在html页面中使用link标签引入css文件（）link标签在head 。
<link rel="stylesheet" href="文件名.css">

2. 选择器：

2.1 基础选择器

（1）标签选择器：标签名作为选择器。
（2）类（class）选择器：以（.+类名）做选择器，类名为自己定义的属性class的属性值。（开发使用最多，修改样式）。
类选择器-多类名：在标签属性class定义多个类名，类名必须用空格分开。一般用于相同的属性-属性值。
（3）id选择器：用（#+id名）做选择器，类名为自己定义的属性id的属性值。（只能调用一次，不允许别的标签调用，经常和js搭配使用）
（4）通配符选择器：以（*）做选择器，选取所有的标签。
类选择器部分用词：

头：header
内容：content
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局的宽度：wrapper
左中右：left center right
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink

2.2 复合选择器

（1）后代选择器（重要）：可以选择父元素中的子元素
使用：父元素子元素 {}；父元素子元素子元素{}
元素可以是任意的基础选择器，元素中间用空格隔开，等级依次递减。

（2）子选择器（重要）：只能选择某元素最近一级的子元素
使用：父元素>最近一级的子元素 {}

（3）并集选择器（重要）：可以选择多组任意选择器，同时为他们定义相同的样式，（通常用于集体声明）
使用：选择器，选择器 {}

（4）伪类选择器：给某些选择器增加特殊的效果。
（4.1）链接伪类选择器：
a:link {} 表示所有未被访问过的链接
a:visited {} 表示所有已经被访问的链接
a:hover {} 表示鼠标触碰到后的链接（常用）
a:active {} 表示鼠标点击未松开时的链接
书写顺序LVHA：link，visited，hover，active。
（4.2） :focus伪类选择器
表示获取焦点，一般用于input表单元素，点击表单后显示的光标。
input:focus {}

3. CSS字体属性

（1）字体属性：font-family；属性值：可以定义多个字体，字体之间用(,)隔开。

（2）字体大小属性：font-size；属性值：数字+px。（标题标签需要单独指定文字大小）。

（3）字体粗细属性：font-weight；属性值：normal正常，bold粗体，bolder特粗体，lighter细体，number数字无单位（实际应用中最常用数字，粗体： 700，正常：400）。

（4）文字样式属性：font-style；属性值：normal正常，italic斜体。

（5）字体复合属性：
顺序不能换,每个属性之间用空格隔开；必须保留font-size和font-family属性：font: font-style font-weight font-size/line-height font-family;

font: italic 700 16px "Microsoft yahei";

4. 文本属性（定义text文本的外观）

（1）颜色：
属性：color；属性值：单词red；十六进制#ff0000；rag（255，0，255）。

（2）对齐文本：
属性：text-align用于水平对齐；属性值：left左，center中，right右。

（3）装饰文本：
属性：text-decoration；属性值：none默认没有装饰线，underline下划线，overline上划线，line-through删除线。

（4）文本缩进：
属性：text-indent；属性值：数字px或者数字em（em是相对单位，是当前元素（font-size）的单位，2em就是两个单位大小）。

（5）行间距：
属性：line-height；属性值：数字px
行间距是上间距，文字高度，下间距三部分组成。

5. CSS元素显示模式

（1）块元素：独占一行，不能放在文字标签（p，h）中。

（2）行内元素：一行多个，高宽无法设置，行内元素只能容纳文本或其他行内元素，不能放入块元素。
注意：链接a里面可以放入块元素，a最好转换一下块级模式

（3）行内块元素：
行内元素中特殊的标签：img，input，td，他们同时具备块和行内元素的特点，一行可以放多个还能设置高宽。

（4）转换元素：
转换为块元素： display: block;
转换为行内元素： display:inline;
转换为行内块元素（重要）： display:inline-block;

小技巧：css中实现文字居中，可以让文字的行高等于盒子的高度，line-height=height

6.CSS背景

（1）背景颜色（底部）
属性：background-color:属性值：transparent透明的，color颜色

（2）背景图片
属性：background-image适用于小图片或超大背景图片，控制位置方便；属性值：url（图片地址）或 none无背景

（3）背景图片平铺
属性：background-repeat；
属性值：
repeat：背景图片在纵向和横向上平铺
no-repeat：背景图片不平铺
repeat-x：背景图片在横向上平铺
repeat-y：背景图片在纵向上平铺

（4）背景图片位置（重要）
属性：background-position:x y;属性值表示x坐标和y坐标
属性值
length：百分数，例如10px 10px（精确单位）
position：top，center，bottom，left，center，right方位名词（x，y顺序无关，只设定一个值第二个值默认居中对齐）
属性值还可以是混合使用：精确单位和方位名词，例如 10px center

（5）背景图片固定
属性：background-attachment：设置背景图片是否固定或者随页面的其余部分滚动。后期用于视差滚动
属性值：scroll 背景图片随页面滚动的，fixed 背景图片固定的

（6）背景复合写法
可以将background的所有属性写到一个属性中在，中间用空格隔开：background: 颜色地址平铺滚动位置;

（7）背景色半透明
属性：background：rgba(0,0,0,0.3)；r：red对应0；g：green对应0；b：blue对应；a：alpha透明度对应0.3，取值在0~1之间。（盒子内容不受影响）

7. emmet语法（vscode软件）

（1）输入标签名按Tab键即可生成
（2）生成多个相同的标签：（标签名）+（*）+（数字）即可
（3）生成父子关系标签：标签之间用>。例如ul>li
（4）生成兄弟关系的标签：标签之间用+
（5）生成带class或者id的标签：（标签名）+（.或者#）+（名），如果不加标签名默认标签是div。
（6）生成类名排序标签：（标签名）+（.或者#）+（名）+（ $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots字：标签名{内容}。`div{$ }*5`

（8）快捷键生成属性属性值：例如text-align: center;可以用tac，width : 100px;可以用w100。
（9）保存时格式化代码（VS code）：
快捷键（Ctrl+,)打开设置，搜索emmet.include，找到在settings.json中编辑，在上一个语句结尾加一个（,）后直接添加
"editor.formatOnType": "true", "editor.formatOnSave": "true"
保存即可。

8. CSS三大特征：

（1）层叠性

（2）继承性
（3）优先级

选择器	选择器权重
继承 and *	0,0,0,0
标签选择器	0,0,0,1
类选择器 and 伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内式style	1,0,0,0
!important	无穷大

权重叠加：
ul li {} 权重： 0,0,0,1+0,0,0,1（会叠加不会进位）
li {} 权重： 0,0,0,1
.ccc li {} 权重： 0,0,1,0+0,0,0,1
a:hover {} 权重： 0,0,0,1+0,0,1,0

9. 盒子模型

（1） border边框
属性：border-width：边框粗细；属性值：数字px
属性：border-style：边框样式；属性值：solid（实线边框）dashed（虚线边框），dotted（点虚线）
属性：border-color：边框颜色；
border简写：border: 1px solid black;(无顺序)
重要!：（上top，下bottom。左left，右right）
属性：border-collapse：collapse。合并相邻边框
（2）content内容
（3）padding 内边距
属性：padding-left：左内边距；padding-right：右内边距；padding-top：上内边距；padding-bottom：下内边距。
padding简写：
padding: 5px; 表示上下左右为5px内边距。
padding: 5px 10px;表示上下为5px内边距，左右为10px。
padding: 5px 10px 15px;表示上为5px内边距，左右为10px，下为15px。
padding: 5px 10px 15px 20px;表示上为5px内边距，右为10px，下为15px，左为20px（顺序为顺时针：上右下左）
注意：当不定义width/height数据时，padding不撑开盒子
（4）margin 外边距
属性：margin-（上top，下bottom。左left，右right）
注意：margin与padding属性使用基本相同。
应用：
1，外边距让块盒子在页面水平居中条件（常用）：
（1）盒子必须有width。（2）盒子左右外边距设置为auto。
div { width: 300px; margin: 0 auto;}
2，行内元素水平居中：
增加text-align: center;。

sxx鸟人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础CSS

使用步骤：1.1，在html中head双标签中定style双标签编码CSS。1.2，使用格式：选择器 {属性：属性值；}选择器：2.1，基础选择器（1）标签选择器：标签名作为选择器（2）类（class）选择器：以（.+类名）做选择器，类名为自己定义的属性class的属性值。（开发使用最多，修改样式）类选择器部分用词：头：header 内容：content 尾：footer 导航：nav侧栏：sidebar栏目：column页面外围控制整体布局的宽度：wrapper.
复制链接

扫一扫