CSS学习

简介: CSS学习

CSS

全称Cascading Style Sheets

一种样式表语言,为html标签修饰定义外观,分工不同

CSS与HTML关系

html是网页的内容

css是网页的样式(结构)

行内样式表
只能对所在标签进行修饰,优先级最高,相对用的少



微博


内嵌样式表
平常练习用的多,写在style标签内


cxk

通配选择器
匹配所有的标签,优先级最低

*{
font-size: 20px;
}
id选择器


蔡徐坤

选择器优先级
匹配标签越多,优先级越低,重叠选中标签时,使用优先级高的样式

但低优先级与高优先级没有重叠的样式,也会添加低优先级的样式

由高到低:行内样式表->id选择器->类选择器->标签选择器->通配选择器

后代选择器
对某个父标签的下级标签修饰

如列表



  • 列表项1

  • 列表项2

  • 列表项3

  • 列表项4



文本
color:字体颜色
可使用十六进制颜色代码,如#ff7f50

也可使用颜色所表示的英文字母,如red

color: #ff7f50;

font-size:字体大小
需要在设置的大小后加上像素单位px,如20px

px:像素单位 css中尺寸需要添加单位

font-size: 20px;

font-family:字体
需使用字体库中拥有的字体,如font-family: 楷体;

text-align:文本对齐
text-align: center;

文字水平对齐

text-decoration:line-through
定义穿过文本下的一条线,即给文本添加删除线

text-decoration:underline
定义文本下的一条线,即添加下划线

text-decoration:none:定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
font-weight: 700;

line-height:设置行高
line-height: 50px;

letter-spacing可以指定字符间距
letter-spacing: 20px;

text-indent用来设置首行缩进
text-indent: 2em;

em:当前文本中一个字符的大小

背景
background-color背景颜色
与为字体添加颜色相同

使用时 background-color: aquamarine;

background-image背景图片
background-image: url(img/bg.jpg);

background-repeat背景重复
background-repeat: no-repeat;

设置背景不重复

background-size背景尺寸
background-size:400px 500px;

先宽,后高

background- position 背景位置
background-position: right top;

背景图片位置,先设置水平,后垂直,上述代码表示背景在右上角

CSS列表
属性可以放置、改变列表项标志,或者将图像作为列表项标志 。

list-style-image 将图象设置为列表项标志。
list-style-image: url();

list-style-position 设置列表中列表项标志的位置。
list-style-position: inside;

图标位置,在列表里(inside)还是列表外(outside)

list-style-type 设置列表项标志的类型。
list-style-type: none;

list-style 简写属性。
list-style: none url() inside;

CSS伪类
专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。

伪类的语法:

:hover伪类表示鼠标移入的状态
a{
color: cadetblue;
}
a:hover{/ 鼠标移进去显示 /
color: crimson;
}
:active表示的是被点击的状态
a:active{
color: coral;
}
/一般给按钮设置 点击后显示/
:focus向拥有键盘输入焦点的标签添加样式
/ 当拥有输入功能的标签 获得鼠标焦点时 自动切换到此样式表 /
input:focus{
background-color: aqua;
}
透明
opacity:0-1
0完全透明,但图片还存在 1不透明

​img{
opacity: 0.5;
}
display: none;
使内容在网页上消失

块级标签
无论内容多少都会独占一行

可以设置宽高

主要用来进行网页布局

例如:p,h1...h6等标签

div标签
块级标签,没有任何附加样式,可以放置任何标签,设置什么样式就变成什么样式

div标签是一个纯净版的块级标签

行级标签
只占内容大小,不会占一行,设置宽高也无效

例如 a,b,s,i 等标签

主要用来对网页的文字进行修饰

span标签
一个纯净版的行级标签,对网页的文字进行选中,修饰

行级块标签
不占一行,又可以设置宽高。例如:img input

因此常用标签 div span a 表格 表单 列表

盒子模型
每一个标签都像一个盒子,网页布局其本质就是摆放盒子

每一个盒子又分成4个区域

内容区:放内容的区域
通过width和height两个属性可以设置内容区的大小,而不是整个盒子的大小。

内边距:内容区到边框的距离
使用padding属性来设置标签的内边距。

padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;

/ 四个方向都相同时 /
padding: 10px;

/ 上 右 下 左 /
padding: 5px 10px 15px 20px;

/ 先上下 后左右 /
padding: 10px 20px;
边框:标签的最外层
使用border属性来设置盒子的边框。

border-top-width: 2px;
/边框宽度/

border-color: red;
/边框颜色/

border-top-style: solid;
/边框样式dotted (点线) dashed (虚线) solid (实线) double (双线)groove (槽线)/

/ border-top: 2px red solid; /
border: 2px red solid;

/ 圆角框 /
border-radius: 10px;
/四个角/

border-top-right-radius: 10px;
/右上角/

border-top-left-radius: 10px;
/左上角/

外边距:一个标签距离另一个标签之间的距离
使用margin属性可以设置外边距。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等.

只设置左外边距或右外边距,外边距会变为最大值,当左右都为auto时,标签就会居中

垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto

标签大小 = 内容区大小+内边距大小+边框

文档流
标签在网页二维平面内默认的排放方式

网页布局
本质就是打破默认的文档流规则

浮动
会使标签脱离原来的文档流(二维平面),悬浮起来

float:left

浮动后会产生一个问题:浮动后的标签,不会占用原来文档流的位置,下面的标签就会上移,跑到浮动标签的下面,影响后面的网页布局

清除浮动

定位
使用position属性

相对定位
position: relative;

开启相对定位,只开启了相对定位,但未设置偏移,标签不会发生变化

left: 100px;

相对定位是以自己本身位置为参照物定位的,不会让标签脱离文档流

绝对定位
position: absolute;

开启绝对定位,立即脱离原来的文档流

left right top bottom四个属性来设置标签的偏移量

left: 100px;

移动时参照物:

    离他最近的,开启了定位的父级标签,如果所有的父级标签都没有开启定位,那么它以浏览器的边框为参照物

    一般情况下,开启一个标签的绝对定位,都会开启父级标签的相对定位
相关文章
|
XML 编解码 前端开发
css核心知识学习
css核心知识学习
65 0
|
4月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
37 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
2月前
|
Web App开发 移动开发 自然语言处理
|
4月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
68 0
学习css的clip-path属性
|
4月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
47 2
|
4月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
35 1
|
6月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
230 0
|
6月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
89 0
|
4月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)