css普通用法
Css普通用法
这是一个链接 W3C，用这个语法可以访问W3C,自己可以去看更加详细的内容。
基本语法
名字{
类型：参数
类型：参数
}
a{
color:blue
}
引入方法
直接在html之中进行带入到html代码之中，文件不需要重新写一个，用
或者是书写一个.css文件之中，然后加一个引用到整个文件之中。
第一个的优先级最高，第一个与第二个同时使用，第一个为主。
<link rel = "stylesheet" herf = "路径">
路径：寻找直接路径或者间接路径
下面就是*.ccs里面写的内容
qw{
color:red;
weight:80px;
height:80px;
}
选择器
基础选择器
标签选择器
<style>
q{
填不同的属性
}
</style>
类选择器(class)
.bule{
属性
}
以 .名称 开通的叫做类选择器，用class进行调用。一个标签可以调用多个类选择器（中间用空格隔开），提取相同的属性元素，用到这个内容之中。一个类可以被等多个标签调用。
<div class = "blue red"><div>
这里共同调用了blue和red这个类。
id选择器
#m{
属性
}
用 #名称 开头，用id进行调用，一个id只能被一个标签调用
<div id = "id_name">
内容
</div>
通配符选择器
<style>
*{
属性
}
</style>
整个页面都会被改成目前这个格式，不需要进行调用。
复合选择器
这里不进行讨论
常用的元素属性
字体属性
设置字体类型
test{
font-family= "";
}
设置字体大小
p{
font-size:80px;
}
设置字体粗细
这里可以用normal和bold代替使用
p{
font-weight = 800;
}
文字样式
p{
font-style:italic
}
这里可以使用normal代替，就不会出现倾斜的内容
文本属性
文本颜色设置
p{
color:
}
这里有不同的设置方法，可以通过选色器进行选择不同的内容！
文本对齐
p{
text-align:
}
left(左),right（右）,center（中）
文本装饰
p{
text-decoration:
}
underline 下划线.none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. line-through 删除线
文本缩进
p{
text-indent:
}
首段缩进，后面直接接上缩进的大小，单位px或em。一般使用em，单位为目前字体的字符数。
背景属性
背景颜色
p{
background-color:
}
与字体颜色差不多的设置方法。transparent(透明的)
背景图片
p{
background-img:url()
}
这里可以放是绝对路径, 也可以是相对路径，也可以是网络路径
p{
background-repeat:[ ]
}
不同的拼平铺方式
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
背景位置
p{
background-imge：url()
bcakground-position:
}
这里有精确的位置，也有top, left, right, bottom一些方位词！
浏览器打开调试工具
打开浏览器，然后用Fn+F12（或者直接点击页面，出现坚持元素）
元素： 查看标签结构
控制台： 查看控制台（主要用于JavaScript调用内容的查看）
来源： 查看源码+断点调试
网络： 查看前后端交互过程
应用：查看浏览器提供的一些扩展功能(本地存储等)
Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
元素的显示模式
块级元素，行内元素
块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置
其他不介绍了
盒模型
整个html模型都是一个盒子模型，内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
具体的目前用Vue进行操作，后面的不同在现在的问题讨论
原文地址：https://blog.csdn.net/asibble/article/details/145311239
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！