HTML+CSS 个人学习时的笔记，粗略参考【CSS】

最新推荐文章于 2024-06-20 00:04:40 发布

浅度学习的ryan

最新推荐文章于 2024-06-20 00:04:40 发布

阅读量235

点赞数

分类专栏：吃掉这本前端基础文章标签： css css3

本文链接：https://blog.csdn.net/Limonor/article/details/108541451

版权

CSS

CSS书写顺序


1. 布局定位属性	display / position / float / clear / visibility / overflow
2. 自身属性	width / height / margin / padding / border / background
3. 文本属性	color / font / text-decoration / text-align / vertical-align / white-space / break-word
4. 其他属性	content / cursor / border-radius / box-shadow / text-shadow…

清除内外边距

* {
   
    margin: 0;
	padding: 0;
}

将所有元素的内外间距都设为0，因为不同浏览器策略不同，这样是为了消除差异，方便页面布局。

注意：行内元素的外边距，只有左右方向起作用，上下不起作用。尽量不要给行内元素指定上下的内外边距。

CSS选择器

基础选择器
- 标签选择器 →给 <p> <h2> <div>这种标签定义统一样式，比较基础。
- 类选择器 →单独选择一个或几个标签 .head {...} 这种形式，类似函数的定义和调用。调用用class=" " >>调用类查一下类命名规范
```
.head {
       
    width: 100px;
    height: 200px;
    color: #888;
}
```
```
<p class="head">hello world!</p>
```
- id选择器一次只能选择一个标签，一般和js搭配如 #abc {...}
- 通配符选择器选取页面中所有元素，不需要调用，如 *{...}

复合选择器

后代 ul li a {...}
子指定最近的子类 ul>li
并集 ,

伪类：用于向某些选择器添加特殊的效果，最大的特点是用冒号表示

链接伪类


`a:link`	选择所有未被访问的链接
`a:visited`	选择所有已被访问的链接
`a:hover`	选择鼠标指针位于其上的链接
`a:active`	选择活动链接（鼠标按下未弹起）

为了确保生效，请按照LVHA的顺序写

链接是需要单独指定样式的，包含在大容器中不会随着外面的样式变化。

实际开发中，先写个a链接样式，再写一个hover，就可以了

：focus伪类

用于选取获得焦点的表单元素

焦点=光标，一般情况适用于<input> 主要针对表单
```
input:focus {
         
    background-color: yellow;
}
```
元素伪

复合选择器总结

选择器	作用	特征	隔开符号及用法
后代选择器	用来选择后元素	可以是子孙后代	`.nav a { }` / `ul li a {}`
子代选择器	选择最近一级元素	只选亲儿子	`.nav>a`
并集选择器	选择某些相同样式的元素	可以用于集体声明	`.nav,.header`
链接伪类选择器	选择不同状态的链接	跟链接相关	重点记住`a{ }`和`a:hover`实际开发的写法
:focus选择器	选择获得光标的表单	跟图表相关	input:focus记住这个写法

PS：

一个大div，里面小div，鼠标经过大盒子，小盒子做一些变化

.div_big:hover .div_small {
   }

一个大div，里面伪类小div，鼠标经过大盒子，小伪类做一些变化

div:hover::after {
   }

CSS三大特性

层叠性

相同的选择器相同的样式，遵循后面覆盖面前的原则。

继承性

子标签会继承父标签的某些样式（text- font- line- color）

行高的继承

一个小说明：font可以一起指定文字大小和行高如font: 12px/20px;

已有父标签body，子标签div
body {
     
    font:12px/1.5;
    这是属于行高不带单位，表示其子元素的行高为子元素文字大小的1.5倍
}
div {
     
    font-size: 14px;   div里的文字行高就为14*1.5
}

这样的写法就是为了让子元素自己调整合适的高度。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器	权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=" "	1,0,0,0
!important	∞

<div class="test" id="demo" style="color:blue">我的世界</div>

继承的权重是0！如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

a链接在浏览器中是默认指定了一个样式蓝色下划线，所以继承对a链接是无效的，必须自己写a

CSS style

可以给<body>加style，也就是全局背景、样式的。

<body style="...">
    ...
</body>

CSS盒子

页面布局三大核心

盒子模型 利用CSS摆盒子
浮动
定位

传统网页布局三种方式

普通流（标准流，文档流）

所谓的标准流，就是标签按照规定好默认方式排列。
1. 块级元素独占一行，从上到下。
2. 行内元素按照顺序，从左到右，碰到父元素边缘自动换行
标准流是最基本的网页布局方式。
浮动
定位

边框border

border:border-width（边框粗细） border-style（边框样式） border-color（边框颜色）

border会影响盒子的大小

内边距padding

边框与内容之间的距离

padding-上下左右 up / bottom / left / right

为了方便，可以选择写值的个数

1个值 代表全部；2个值 代表上下和左右；3个值 代表上左右下；4个值 代表上右下左（顺时针）

padding会影响盒子的大小

有宽度的盒子，设置padding的左右会撑大盒子；同理，有高度的盒子，padding上下也会撑大。所以，想要不撑大，就不设置相应的宽高。若必须得设置宽高，则考虑用margin来做。

外边距margin

控制盒子与盒子之间的距离

margin-上下左右 up / bottom / left / right

简写方式与padding完全相同

📝外边距可以让“块级盒子”水平居中，但是有两个条件：

盒子必须制定了width

只需要把盒子左右外边距都设置成auto

盒子与盒子之间用margin

盒子高级效果（圆角、阴影）

圆角边框

border-radius: 10px; //填的是圆形半径 或者 百分比（宽度的百分比）

盒子阴影

box-shadow: 'h-shadow v-shadow blur spread color insert'

值	描述
`h-shadow`	必需，水平阴影的位置，允许负值
`v-shadow`	必需，垂直阴影的位置，允许负值
`blur`	可选，模糊距离

最低0.47元/天解锁文章

浅度学习的ryan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 个人学习时的笔记，粗略参考【CSS】

CSSCSS书写顺序1. 布局定位属性display / position / float / clear / visibility / overflow2. 自身属性width / height / margin / padding / border / background3. 文本属性color / font / text-decoration / text-align / vertical-align / white-space / break-word
复制链接

扫一扫

专栏目录