Css初学笔记

最新推荐文章于 2024-03-12 20:08:25 发布

疯狂减肥的叶子

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量111

点赞数

分类专栏： web 文章标签： html

本文链接：https://blog.csdn.net/m0_54243053/article/details/112755807

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是css

Cascading style sheet 层叠样式表
Css不能脱离htmldandu存在

语法

属性的设置

属性名和属性值之间用：分割
多对属性之间；分割
最后一对属性可以不加；

 Style

<div style=”width:100px;height:10px:background-color:red”></div>

 其他

代码块
{
Width：100px
Height：10px;
Background-color:red
}

注释

写法 /注释内容/
作用
注意
注释不能嵌套使用

速记语法

类似于font，background， padding， border， margin 这些都被称为速记属性。这些属性允许我们在一行中写多个属性值。速记属性可以节省时间,使代码整洁

padding: 10px 15px 15px 5px;  ==   padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;  ==上 右 下 左
padding: 10px 15px 5px
==上10 左右15 下5

padding: 10px；//上下左右均为10px

margin 和padding用法基本一样

margin:padding;
margin:0auto;//设置给具有宽度的块级元素时，元素可以在父元素中自动居中

broder：1px solid red； ==
border-width：
border-style:
border-color:
border-top-width：
border- top-style:
border- top-color:

Css作用到html上？

行内样式

写在标签内部的style属性上

内嵌式/内部样式表

在head内部使用style标签设置

外部样式表

当前htmll文件外部，创建css文件
.css为文件后缀名

Link标签
@import属性
优先加载css
优先级：
行内样式>内嵌式=外部引入
结论：
就近原则：哪一个样式距离html元素更近，睡的优先级更高

选择器

标签选择器

通过选择标签名称选择一类元素

Div{}
Span{}
P{}

Id选择器

通过id元素选择一个元素
#one:

普遍选择器

后代选择器

空格：选择所有后代元素

:选择直接子元素

兄弟选择器

+：选择当前元素之后的一个兄弟元素
~：选择当前元素之后的所有兄弟元素

组合选择器

div #one p>span 选择class为one的div标签之后的p标签内的span标签
div#one
div.one 选择所有div元素且class为one

多选择器

Div,p,span,#one,one{}
大括号应用于前面所有标签

属性选择器

根据元素的属性选择一类元素，[]表示属性

 [id]：具有id属性  [id=’one’]：具有id属性, 属性值唯一为one的
 [class~=’one’]：具有class属性，并且属性值之一为one的元素
 [class^=’o’]：具有class属性，并且属性值以o开头的元素
 [class$=’o’]：具有class属性，并且属性值以o结尾的元素
 [class*=’o’]：具有class属性，并且属性值包含o的元素

伪类选择器

Div class=”one”
.one
:伪类选择器

	:firsrt-child
	:last-child
	:Nth-child(num/odd/even)

	:first-of-type:
	Last-of-type:
	a:

:link:未点击状态
:hover:悬停状态
:active:鼠标按下状态
:visited:点击之后的状态

顺序

Link-> visited -> hover -> active

伪元素选择器

假元素
：：伪元素名称

::first-letter选中第一个字符
::first-line选中第一行
::before 内容之前
Content:’’内容”
Content:url（’.1.png’）

::after内容之后
::selection

选择器优先级

！important：//不计入优先级计算，优先级最高 ——建议少用
特性值计算
特优先级越高性值越高，优先级越高；
特性值相同，谁更靠下（靠近html），谁优先级越高
写在style属性内部：1000
Id选择器：100
类/伪类/属性：10
标签/伪元素：

继承

有些默认继承父元素，有些不继承
属性
Inherit 继承父元素的样式
Initial 不继承，应用浏览器的默认样式

尺寸+颜色-单位

尺寸：

绝对单位
px

相对单位
百分比
1em~1个M的宽度（16px）
颜色：
1.关键字
red
blue
2.rgb(r,g,b) ----隔开三原色取色值
r:red
g:green
b:blue

	0-255
3.rgba(r,g,b,a)
	a:apcaity:透明度
		0-1:
		0:完全透明
		1:完全不透明
4.16进制颜色值
	#
	#ff0000
	#fff:白色
	#ccc:灰色
	....

文本样式

color:  字体颜色

font-size
font-style
font-weight
font-family

“宋体”
字体栈：“宋体”，“黑体”
c:/winodws/Fonts
c:/users/Fonts

网络字体
web-font:网络字体
1.下载字体文件
2.声明字体
@font-face{
Font-fanmely:’’
Src:url
}
安装
3.引用

<div class="one">
.one{
	width:100px;
}
.myone{
	width:100px;
}

<div class="myone">

字体图标：
	1.font-awesome
		1.下载框架压缩包
		2.在html中引入外部css文件
		3.在行内元素上，设置class='fa fa-xxx'
	2.icon-font
		1.下载压缩包
		2.在html中引入外部css文件
		3.在行内元素上，设置class='iconfont xxxx'