CSS

CSS的作用是调整HTML标签的样式，美化网页的界面

CSS的结构

每个CSS都由两个部分组成，分别是选择器与属性

选择器用于选择要修改样式的标签

属性是标签内要具体修改的内容

p {color: black;
}

在没有规定选择器范围时，默认为整个HTML文件，上述代码是把所有的p标签中的文字颜色更改为黑色

CSS的添加方式

CSS有三种添加方式

1.导入CSS文件

将所有的CSS样式集中在CSS文件中，方便集中管理

使用时在网页的head标签中使用link导入CSS文件即可

2.style标签

在head中添加style标签，把所有的CSS样式放置在标签中，方便查看

<style>p {color: black;}
</style>

3.直接写在标签内部

使用最快捷，但是查找时比较繁琐

选择器的范围

选择器有多种方式来规定适用范围

1.布局标签

直接选择指定标签，还可以选择布局标签body、div等，来规定该布局空间内的所有标签的属性

div {  color: green;
}

2.id/class

通过指定的id/class来指名道姓查找标签

目标是id时需要在前面添加#

目标是class时需要在前面添加.

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

3.属性选择器

通过筛选属性来查找标签，属性需要添加括号

[name] {background-color: red;
}

4.*

*代指所有的标签，一次性修改所有标签的属性

选择器的优先度

同一标签可以同时被多个选择器修改标签，但会根据优先级只生效一个

选择器相同，位置不同时

就近原则，优先生效距离最近的一个

选择器不同时

行内 > id选择器 > 类选择器 > 标签选择器

组合选择器

当多个不同的选择器修改的属性样式相同时，可以用逗号将它们合并成一个

div {color: red;
}p {color: red;
}span {color: red;
}
-----------------------------
div,p,span {color: red;
}

weight与height

weight与height分别用来控制标签宽度与高度

如果没有设置宽度的话，默认宽度由标签内的内容长度来自动分配

字体相关属性

font-family

修改字体样式，默认字体为黑体

可以输入多个字体选择，使用优先级为从左到右

font-size

修改字体大小，可以选择预设的大小，也可以手动设置

font-weight

修改字体粗细

text-align

调整字体的对齐样式，默认为左侧(left)，可以选择居中(center)，右侧(right)

color

调整字体颜色，可以使用颜色对应的英文单词或者rgb来确认颜色

如果输入rgba，则最后一个数字用来调整不透明度(0-1)

decoration

调整字体样式，可以选择添加下划线、删除线等

也可以用来清除a标签中默认拥有的删除线

背景属性相关

大多数标签中都存在背景属性，例如表单、布局标签等，背景位于标签内部最底层

background-color

调整背景色，方式与调整字体颜色相同

background-image

将背景更改为图片，如果背景大小大于图片大小默认将图片平铺

background-repeat

当背景大小大于图片大小时，图片的填充方式，默认为平铺

边框相关

边框是所有标签都拥有的属性，相当于标签的边界

边框有四个方向，如果不选择方向默认为全选

border-color

调整边框颜色，方式与调整字体、背景相同

border-size

调整边框厚度，单位为px

border-style

调整边框样式，默认为无边框

前端-CSS样式的简单介绍相关推荐

小高不太行之前端——CSS样式 I
小高不太行之前端--CSS样式(基础)上提示:下篇马上问世,在赶了在赶了提示: 文章目录小高不太行之前端--CSS样式(基础)上前言一.基础知识 (一)插入方法[外部/内部/内联] 1.外部 ...
【前端】3.总结一下前端css样式规范
总结一下前端css样式规范前端样式CSS 规范分类的命名方法统一语义理解和命名模块(.m-).元件(.u-) 功能(.f-) 皮肤(.s-) 状态(.z-) sass 规范当前选择器的样式属 ...
html，css，js简单介绍，html常用标签
目录简单介绍 HTML常用标签 1.html骨架标签 2.标题标签 3.段落标签 4.换行标签 5.文本格式化标签 6.div标签,span标签和pre标签 7.图像标签 8.超链接标签 9.注释标 ...
HTML、CSS、JS简单介绍以及HTML的标签
目录一.HTML--结构 1.了解网页 2.了解HTML 二.CSS--样式 1.CSS-网页的美容师 2.CSS 的规则 3.CSS的格式三.JavaScript--行为 1.JavaScrip ...
css php html介绍,对CSS知识的简单介绍
1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈 ...
外链式样式表_WEB前端 CSS样式表
CSS层叠样式表字体样式属性 font-size:字号大小页中普遍使用14px+. 尽量使用偶数的数字字号.ie6等老式浏览器支持奇数会有bug. font-family:字体中文字体需要加引号 ...
前端css样式如何设置内边框
背景:我在写鼠标悬停样式 .topbox .menuBox > ul > li:hover { border-bottom: 4px solid #3C7CFC; font-weight: ...
CSS的一些基本样式的简单介绍
1.字体样式 font-family:设置字体类型 font-size:设置字体大小字体风格属性:font-style常用属性值: 1.普通字体:normal 默认2.斜体样式:italic3.倾斜 ...
探索前端CSS样式表的真谛
文章目录前言基本概念 HTML自定义元素和标准元素屏幕尺寸屏幕分辨率屏幕像素密度/像素密度/屏幕密度视口和浏览器窗口长度单位:px.em/rem和vh auto的含义百分比%的含义 C ...

前端-CSS样式的简单介绍

CSS