当前位置:首页 > 前端技术 > 前端基础--CSS

前端基础--CSS

2022年09月16日 16:41:51前端技术4

CSS 指层叠样式表 (Cascading Style Sheets)
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

CSS 语法
CSS 语法由三部分构成:选择器、属性和值:

selector {property: value}

基本选择器:
1.标签选择器
基本语法:标签名 {属性名:值,…}
2.类选择器
基本语法:.类名 {属性名:值,…}
3.id选择器
基本语法:#id名 {属性名:值,…}
4.通配符选择器(声明所有标签的属性)
基本语法:* {属性名:值,…}

id选择器和类选择器的区别:
id是唯一的,每个id只能出现在一个标签中。而相同的类名可以附加给多个标签,同样一个标签也可以有多个类名,用空格分隔即可。如< div class=“类名1 类名2”>

层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

1浏览器缺省设置
2外部样式表
3内部样式表(位于 标签内部)
4内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

其中外部样式表最为常用,它完全实现了网页结构与样式的分离,具体操作如下:
1.建立所需的CSS文件。
2.在需要调用该CSS样式的HTML文件中:

<head>
	<link href="css文件路径" rel="stylesheet">
</head>

CSS背景:

background-color 背景颜色
background-image 背景图片 url(images/图片路径)
background-repeat 背景是否平铺 no-repeat repeat-x(y)
background-position 背景位置 方位名词:top left right center bottom 精确单位:x y
background-attachment 背景固定还是滚动 scroll(默认滚动) fixed(固定)
背景的复合写法
background:颜色 图片 平铺 滚动 位置 background:red url(image.jpg) no-repeat fixed 50% 0

网页布局实质:
把网页元素如文字图片等放入盒子中(可以把双标签都看成一个盒子),然后利用CSS摆放盒子的过程,就是网页布局。

盒子边框:border
语法:border:width style color

常用属性
border-style none(默认无边框) solid(单实线) dashed(虚线)dotted(点线) double(双实线)
border-方位 方位:top bottom left right

合并表格边框:
table{border-collapse:collapse}

圆角边框:border-radius:左上角 右上角 右下角 左下角
只有一个属性值时,代表四个角都被影响
有两个属性值时代表对角
只有一个属性值且为50%或设定width的一半时矩形框变成圆形

内边距:padding
内边距是指内容与边框之间的距离
属性值的情况与border-radius基本一致,以上边距瞬时值旋转。

外边距:margin
边框与外部(可能是浏览器边缘或其他盒子)的距离
取值顺序与内边距一样

外边距实现盒子居中:
条件:

  1. 必须是块级盒子
  2. 盒子必须指定了宽度
    令其左右外边距为auto即可实现块级盒子居中。

盒子内的文字居中:
div {text-align:center;}

清除内外边距:
有些盒子本身就有默认的边距,为了方便的控制网页中的元素,制作网页中,常使用如下代码来清除内外边距
* { padding:0;margin:0;}

注意尽量不要给行内元素指定上下的内外边距

嵌套块元素垂直外边距的合并:
简单来说即无法调整子元素在父元素块内的位置
解决方案:

  1. 可以为父元素定义1像素的上边框或上内边距
  2. 为父元素添加over:hidden

元素的定位属性:
元素的定位属性主要包括边偏移和定位模式

  1. 边偏移
    例如:top:100px;就是该元素相对与其父元素上边界移动100px 其他三个方向类似。边偏移与定位模式搭配使用。
  2. 定位模式
    基本语法:选择器 {position:属性值}
描述
static 自动定位(默认)
relative 相对定位,相对于原文档流的位置进行定位
absolute 绝对定位,相对于其上一个已经定位的父元素进行定位
fixed 固定定位,相对于浏览器窗口进行定位

作者:InSighT__
来源链接:https://blog.csdn.net/qq_43813560/article/details/88701813

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42075.html

标签: css
分享给朋友:

“前端基础--CSS” 的相关文章

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

CSS元素类型

CSS元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。