0
点赞
收藏
分享

微信扫一扫

Css入门学习笔记

MaxWen 2022-09-29 阅读 150


欢迎加入Unity业内qq交流群:956187480


1.语法基础

格式:选择器{属性1:值1;属性2:值2}
单位:px像素pixel,%百分比根据外部父容器设置大小
基本样式:width,height,background-color
2.CSS样式的引入方式

1.内联样式:style属性
<div style="width: 100px; height:100px; background-color: red;">这是一个div块</div>
2.内部样式:style标签
<style>
div{width: 100px; height:100px; background-color: red;}
</style>
内部样式的代码可以复用,复合w3c的标准规范,尽量让结构和样式分开处理
3.外部样式
引入一个单独的css文件,name.css
<link>标签用来引入外部资源,rel指定引入资源类型,hraf指定资源地址路径:
<link rel="stylesheet" href="./common.css">
@import也用来引入外部样式: @import url('./common.css')
3.CSS中颜色的表示方法
单词表示法,十六进制表示法,三原色表示法
4.CSS背景样式
background-color背景色
background-image背景图
url 背景地址
background-repeat
水平竖直平铺方式 repeat-x;repeat-y;repeat(x,y)(默认),no-repeat

background-postion 背景图位置:right;30%;50px
background-attachment 背景图随滚动条的移动方式
scroll背景位置是按照当前元素进行偏移的。
fixed背景位置是按照浏览器进行偏移的
5.Css边框样式
border-style:边框样式
border-width:边框大小
border-color:边框颜色
只针对某一条边单独设置:border-right-style 中间是方向
颜色:透明 transparent
6.CSS文字样式
font-family:字体类型
Arial /'Times New Roman'英文字体
微软雅黑,宋体 中文字体

衬线体与非衬线体:显示风格不同
多字体设置:可设置多个备选方案 识别本机存在的字体:div{font-family: SimSun, Helvetica, sans-serif;}
引号问题:字体名字里面出现空格就需要单引号引起来

字体大小:font-size
(不推荐)xx-small 最小;x-small 较小;small小;medium 正常(16px);large 大;x-large较大;xx-large最大
字体粗细:font-weight
模式:正常(normal)加粗(bold)
写法:单词(normaln,bold)|number(100....900)100-500都是正常的,500-900才有加粗效果

字体样式:font-style
模式:正常normal,斜体italic

字体颜色:color

7.CSS段落样式
text-decoration 文本装饰
下划线 underline
上划线 overline
删除线 linethrough
可以附加多个用空格隔开
text-transform 文本大小写(英文)
lowercase 小写
uppercase 大写
capitalize 只针对首字母大写
text-indent 文本缩进
em 相对缩放值
text-align 对齐方式
left right center justify(两边对齐)
Line-height 行高
一行文字的高度,上边距和下边距等价关系

8.css复合样式
复合样式的写法是通过空格是实现的,有的对顺序没有要求background:border;font字体就必须按照顺序写
1.background: red url() repeat 0 0;
2.border: 1px red solid
3.font:(最少要有两个属性:size family)

注意:要么只用单一样式要么只用复合样式,
如果真的要两种都用就要先写复合样式最后写单一样式,
因为后写复合的话就会把之前的单一样式覆盖掉

9.CSS选择器
1.ID选择器
#elem{} id="elem"
注:
1.id是唯一值 在一个界面里面只能出现一次
2.命名规范,由字母,下划线,中划线,数字组成,且第一个字符不能是数字
3.驼峰写法:小驼峰 大驼峰
2.class选择器
.elem{} class ="elem"
注:1.class选择器可以复用,
2.可以添加多个class选择器
3.多个样式的时候,样式优先级根据CSS决定,而不是Class属性中的顺序
4.标签+类的写法
3.标签选择器(Tag选择器)
css:div{}
htm:<div></div>
使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如 层次选择器
4.群组选择器
css:div,p,span{}
5.通配选择器
*{ } -> div ,ul,li,p,h1,h2...{}
注:慎用通用选择器
6.层次选择器
后代:M N{ }
父子:M > N{}
兄弟:M~N{} 当前M下的所有兄弟
相邻:M+N 当前M下面相邻的标签
7.属性选择器
M[attr] {}
= :完全匹配
*= : 部分匹配
^= :起始匹配
$= :结束匹配
[][][] :组合匹配
8.伪类选择器
M:伪类{}
:link 访问前的样式 (只能添加给a标签)
:visited 访问后的样式 (只能添加给a标签)
:hover 鼠标移入时的样式 (添加给所有标签)
:active 鼠标按下时的样式 (添加给所有标签)
如果四个伪类都生效,一定要注意顺序:L V H A
一般网站只设置: a:{} a:hover{}

:after :before 通过伪类的方式给元素添加一个文本内容,使用content属性
:checked :disabled :focus 都是针对表单元素的

结构型伪类选择器
nth-of-type() nth-child()
括号内角标是从1开始的,1表示第一项,2表示第二项 n表示从0到无穷大
first-of-type
last-of-type
only-of-type

nth-of-type()和nth-child()之间的区别
type:类型
child:子节点

欢迎加入Unity业内qq交流群:956187480


举报

相关推荐

css入门学习笔记

CSS入门学习笔记+案例

css学习笔记

CSS学习笔记

css 学习笔记...

CSS学习笔记(三)

0 条评论