CSS
使用
注意
- 用冒号赋值
- 分号结尾
- 要写单位px
- 对行内元素,宽度默认为整行,高度默认为0
- css多属性顺序:上-右-下-左,没取的一项取对边值
行内样式
1
| <img src="./static/images/logo.png" alt="logo" style="width: 300px;">
|
内部样式
- 修改一个页面的一类标签
- border-radius:将边角变圆弧
1 2 3 4 5 6
| <style type="text/css"> img { width: 600px; border-radius: 5%; } </style>
|
外部样式表
引入
1
| <link rel="stylesheet" href="./static/css/style.css" type="text/css">
|
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| p { width: 100px; height: 100px; font-size: medium; background-color: lightblue; }
.color, .big { background-color: lightgreen; }
.big { width: 70px; height: 70px; }
|
选择器
标签选择器
1 2 3 4 5
| p { height: 100px; font-size: medium; background-color: lightblue; }
|
ID选择器
1 2 3 4 5 6
| <p id="my-id">id</p> #my-id { color: red; width: 50px; height: 30px; }
|
类选择器class
- 跨标签
- css中.开头
- 同时定义多个class属性使用逗号隔开
- 同时使用多个class使用空格隔开
伪类选择器
- 状态选择器
id
和class
都可以使用
:link
对应未点击的展示
:visited
对应点击后的展示
:hover
对应鼠标悬停的展示
:active
对应鼠标按住的展示
:focus
对应输入框聚焦(开始输入)的展示
链接
1
| <div class="effect"></div>
|
hover
表示当鼠标悬停在上面的情况下
transform scale
表示大小变化
transition
表示该变化完成的时间
1 2 3 4 5
| .effect:hover { background-color: lightcoral; transform: scale(1.1); transition: 200ms; }
|
位置
- num是从该标签所处的父节点开始计算
p:nth-child(2)
:遍历每一个p标签,判断其是否满足num=2
p:nth-child(odd)
:遍历每一个p标签,判断其是否满足num为奇数
p:nth-child(even)
:遍历每一个p标签,判断其是否满足num为偶数
p:nth-child(3n)
:遍历每一个p标签,判断其是否满足num为3的倍数
p:nth-child(a*n + b)
:遍历每一个p标签,判断其是否满足num=a*n+b(n为非负整数)
下面的代码会选中p2和p4
1 2 3 4 5 6 7 8 9 10 11 12
| <div> <p>p1</p> <p>p2</p> </div> <div> <p>p3</p> <p>p4</p> </div> p:nth-child(2) { background-color: blanchedalmond; font-size: 30px; }
|
target
表示该标签被选中:
- 该元素会被放到页面最顶端(如果下面内容足够的话)
- url会变为
http://dqywy.top#my-id
1 2 3 4 5
| p:target { color: orange; transform: scale(1.2); transition: 300ms; }
|
复合选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| a, p, div { width: 100px; color: red; height: 50px; } p:hover, div:hover { background-color: lightblue; }
div.big.color { transform: scale(1.2); background-color: lightblue; }
#my-item.big.color { transform: scale(1.2); background-color: lightblue; }
|
通配符选择器
*
p[id]
:具有id属性的p标签
p[type=text]
伪元素选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| p::first-letter { color: red; }
p::first-line { color: red; }
p::selection { color: green; background-color: black; }
h1::before { content: "《"; color: red; } h1::after { content: "》"; color: red; }
|
优先级
- 先来后到:后面定义的样式会覆盖前面定义的样式
- 越具体越优先:全局选择器 < 标签选择器 < class选择器 < id选择器 < 行内样式表
- 权重 > 次序
1 2 3 4 5
| p { width: 300px; height: 300px !important; }
|
颜色
- 单词
- 16进制
- RGB
- RGBA
- 取色:网页内
ctrl+shift+c
快速选中;QQ截图+ctrl+c
复制16进制色号
文本/文字
子标签会继承父标签的文本属性
对齐
水平居中
1 2 3 4 5 6 7 8
| h4 { text-align: center; }
.mydiv { text-align: justify; }
|
竖直居中
单位
如果要兼容价大屏幕就要少用固定单位px
px
%
:相对于父元素的比例
em
:相对于当前属性的倍数
rem
:相对于根元素属性的倍数
vw
:当前屏幕宽度的百分比
vh
:当前屏幕高度的百分比
字间距
缩进
文本修饰
MDN搜索text-decoration
文本阴影
- x方向偏移
- y方向偏移
- 模糊半径(可省)
- 阴影颜色
1 2 3 4 5
| text-shadow: 1.5px 1px 2px lightcoral;
text-shadow: 1.5px 1px 2px lightcoral, -1.5px -1px 2px lightcoral;
|
字体
font-size
font-style
font-weight
: 数值没有单位,不是px
font-family: monospace
等宽字体
font-face
:引入外部字体
背景
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| .mydiv { width: 700px; height: 500px; background-image: url(../images/background.jpg), url(../images/logo.jpg); background-image: linear-gradient(lightblue, lightcoral); background-size: 700px 500px, cover; background-color: lightblue; background-repeat: no-repeat; background-position: left top, center top; background-attachment: fixed; opacity: 0.5; }
|
边框
1 2 3 4 5 6 7
| border-style: solid; border-width: 4px; border-color: black;
border-radius: 15px;
border-collapse: collapse;
|
展示格式
注意:元素宽度和高度=content+内边距padding+边框border+外边距margin
display
1 2 3
| display: inline; display: block; display: inline-block;
|
block
inline
- 共用一行
- 宽度=内容宽度
- 设置
width
和height
没有作用
- 只用水平方向的内外边距有作用
inline-block
overflow
设置超出部分的内容
1 2 3 4 5 6 7 8
| overflow: auto;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
|
text-overflow
1 2
| text-overflow: ellipsis;
|
设置超出部分换行
1 2 3 4
| word-wrap: normal;
word-break: break-all;
|
边距
注意:避免在两个方向上对同一边距的定义
外边距
该属性定义的是外边距至少是多少——相邻的外边距取最大值
margin
margin-top
margin-right
margin-bottom
margin-left
注:
- 没有提供默认使用对面的值
- 父元素没有定义边框的话会与子元素合并使用,可以对父元素使用如下代码
1 2 3 4
| .div-outer::before { content: ""; display: table; }
|
内边距
1
| padding: 20px 20px 30px 40px;
|
盒子模型
content-box
:默认选项,修改border和padding会改变元素大小;
border-box
:修改border和padding不会改变元素大小
布局
position
https://www.acwing.com/blog/content/16282/
元素重叠可以使用z-index
控制重叠次序,需要将position
修改为非static
position: static
:默认
position: relative
:相对于默认的位置使用top: 10px
、right: px
等改变位置,并且其默认位置会保留
position: absolute
:相对于第一个非static
的父元素,原来的默认位置会剔除,随页面滚动
position: fixed
:相对于第一个非static
的父元素,原来的默认位置会剔除,始终固定在视窗上,不随页面滚动
postion: sticky
浮动
1 2 3
| float: left/right;
clear: left/right/both;
|
flex布局
注意:控制flex
布局是改变父元素的display
属性, inline-block
等是改变当前元素
排列方式
1 2 3 4 5 6 7
| display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: column wrap;
|
grid布局
栅格布局,将元素按照表格的样式布局
1 2 3 4
| .calculator { display: grid; }
|
设置列数和列宽
1 2 3 4 5
| .calculator { grid-template-columns: repeat(4, 6rem); }
|
设置行高
1 2 3 4 5 6
| .calculator {
grid-template-rows: minmax(6rem, auto) repeat(5, 4rem); }
|
设置间隔
1 2 3 4
| .calculator { gap: 3px; }
|
设置占据多列
1 2
| grid-column: 1 / span 4;
|
对齐方式
水平对齐
- flex-start:左对齐
- flex-end:右对齐
- center:居中
- space-between:两端对齐
竖直对齐
- flex-start:主轴始端对齐(默认)
- flex-end:主轴末端对齐
- center:居中
- strech:铺展(元素未定义高度的前提)
- 竖直方向元素之间没有空隙
- 只有一行无法居中,可以使用
align-items
通用对齐
内部元素属性
排列方式和对齐方式都是父元素的属性,下列是定义在子元素的属性
order
:元素优先级,越小越靠前
flex-grow: n
:拥有该属性的元素随屏幕一同伸展,n越大,伸展占比越大
flex-shrink: n
:缩小比例
flex-basis: 100px
:元素的初始宽度,优先级高于width
上面的属性可以统一使用flex
缩写
1 2 3 4 5
| flex: auto;
flex: none;
|
响应式布局之Bootstrap
下载地址:Bootstrap
使用:在官网寻找适合的示例进行修改
1 2 3 4 5 6 7 8 9 10 11 12 13
| @media (min-width: 768px) { .card { background-color: lightgreen; } }
@media (max-width: 992px) { .card { background-color: lightcoral; } }
|
引入
1 2
| <link rel="stylesheet" href="./static/third_party/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"> <script src="./static/third_party/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
|
注意:
- 使用的时候要用包裹在
container
中
row
里面接的元素必须是col
或如col-md-6
等
栅格
1 2 3 4 5 6 7
| <div class="container"> <div class="row"> <div class="col col-md-6 col-sm-12 col-xs-12">用户名</div> <div class="col col-md-6 col-sm-12 col-xs-12">密码</div> <div class="col col-md-12 col-sm-12 col-xs-12">个人简介</div> </div> </div>
|
表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <div class="container"> <form> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> </div> <div class="mb-3"> <label for="exampleInputPassword1" class="form-label">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div>
|