CSS学习笔记

最新推荐文章于 2024-06-13 22:49:40 发布

zunf

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量367

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/weixin_63742275/article/details/129960380

版权

CSS

一、选择器

1.1 标签选择器

语法格式：标签名 {} 会将此页面中所有的此类标签都选中

1.2 类选择器

语法格式：.类名 {}
在HTML标签中使用class="类名"来继承类，class="类名1 类名2"来继承多个类
类可以被多个标签调用
类名有多个单词时用短横线'-'分割
见名知意，特定场景用以下类名：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

1.3 id选择器

语法格式： #id名 {}
在HTML标签中使用 id="id名"来调用
id只能被调用一次，一个标签也只能有一个id，不能多个一起使用

1.4通配符选择器

语法格式：*{}
通配符选择器不需要调用，自动为所有的元素使用样式

1.5 后代选择器

语法格式：父子孙 . . .{}
父子孙.... 可以是标签、id和类名，他们之间用空格隔开
后代选择器用于选取某元素的所有后代元素，包括孙子等等

1.6 子元素选择器

语法格式：父>子 {}
与后代选择器相比，子元素选择器只能选择作为某元素一级子元素的元素

1.7 并集选择器

语法格式：元素1,

元素2，

...... {}
用来选择多个元素进行集体声明，元素也可以是后代选择器和子元素选择器

1.8 伪类选择器

a:link {color:#000000;} 未访问链接
a:visited {color:#00FF00;} 已访问链接
a:hover {color:#FF00FF;} 鼠标移动到链接上
a:active {color:#0000FF;} 鼠标点击时
可用 字体属性、背景、文本属性 来设置在某个状态下的超链接的样式。
常用设置：a {}设置所有状态下黑色且无下划线，a:hover{}设置当鼠标移动到链接上时变色且显示下划线，覆盖a{}中的设置
```
a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: blue;
  text-decoration: underline;
}
```
input:focus { background-color: blue;} 多个input标签，若某个被点击了，就改变样式

二、字体属性

2.1 font-family

用来设置字体系列，字体名中有空格时用引号包括，不区分单双引号
常用：'Microsoft YaHei', Arial, Helvetica, sans-serif 和 'Times New Roman', Times, serif
一个font-family属性设置多个值表示从前往后匹配用户浏览器中已下载的字体

2.2 font-size

用来设置字体大小，单位px
以下代码只能修改body标签中<p>的字体大小
```
body {
    font-size: 16px;
}
```
标题标签的字体大小要特地设定
```
h1 {
    font-size: 16px;
}
```

2.3 font-weight

normal：正常的字体。相当于number为400。声明此值将取消之前任何设置
bold：粗体。相当于number为700。也相当于<strong></strong> 和<b></b>
bolder：特粗体
lighter：细体
值也可以是正整数(100~900)，不用跟单位

2.4 font-style

* normal：默认值，会显示正常的字体样式
* italic：字体样式为倾斜，一般直接用<em></em>或<i></i>将字体设为倾斜
*  font-style一般是用来将倾斜的字体换为正常字体

2.5 font

font 简写属性在一个声明中设置所有字体属性
顺序为：font-style font-variant font-weight font-size/line-height font-family
font-size和font-family的值是必需的，其他的值若缺少了，默认值将被插入
line - height属性设置行与行之间的空间

三、样式表

3.1 内部样式表

    <style>
      #id1 {
        background-color: aqua;
        width: 100px;
        height: 100px;
      }
    </style>

3.2 行内样式表

    <p style="color: red">行内样式表</p>

3.3 外部样式表

    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

四、背景

:页面或元素背景的相关属性

4.1 background-color

body {
    background-color:rebeccapurple;
}

4.2 background-image

body {
    background-image:url('img/4.jpg');
}

4.3 background-repeat

若图片没有父容器这么大，按照什么方向进行重复：

默认：竖直和水平同时重复

repeat-x：水平

repeat-y：竖直

no-repeat：不重复

body {
    background-image:url('img/4.jpg');
    background-repeat: repeat-x;
}

4.4 background-attachment

背景图片是否随父容器的滚动而滚动 (背景不够长就按照 background-repeat中的规则来重复)

scroll : 　滚动，默认值

fixed :　固定

.div1 {
    width: 500px;
    height:5000px;
    border: 1px solid blue; 
    background-image: url('img/6.jpg');
    background-attachment: fixed;
}

4.5 background-position

设置背景图片在父容器中的位置，要分别设置水平竖直位置的值，其中有一个没填就默认center

水平竖直

left top

center center

right bottom

..% ..%

..px ..px

.div1 {
    width: 500px;
    height: 500px;
    border: 1px solid blue; 
    background-image: url('img/6.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
}

4.6 background

background 简写属性在一个声明中设置所有背景属性
各值之间用空格分隔，不分先后顺序，可以只有其中的某些值

五、文本属性

5.1 color

设置文本颜色，值可以为：十六进制值、颜色名称、RBG值

5.2 text-align

设置文本的对齐方式

center：中间对齐

left：左边对齐

right：右边对齐

justify：左右都对齐

.p {
    color: brown;
    text-align: justify;
}

5.3 text-decoration

设置或删除文本的装饰

none：删除文本的装饰，主要用来删除超链接的下划线

line-through：从文字中间穿过的线

underline：下划线

overline：上划线

5.4 text-transform

用来指定在一个文本中的大写和小写字母

uppercase：将所有字母转换为大写字母

owercase：将所有字母转换成小写字母

capitalize：将所有单词的首字母转为大写字母

5.5 text-indent

用来指定文本的第一行的缩进，单位px

六、元素显示模式

6.1 块元素

常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
独占一行，不管宽度是否小于父容器
高度、宽度、外边距以及内边距都可以控制
宽度默认是父容器的宽度 (高度不是)
除了文字类(h1~h6、p)的块元素，其余的都可以放行内元素或者块元素

6.2 行内元素(内联元素)

常见的行内元素：<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>
一行内可以显示多个
高、宽直接设置是无效的
宽度和高度取决与内容本身的宽度和高度
<a>内不能放<a>标签、但可以放块级元素
除<a>外，其余行内元素内只能放行内元素

6.3 行内块元素

既有块元素的特点又有行内元素的特点，常见的：<img />、<input />、<td>
一行可显示多个，相邻的行内块元素之前会有空白间隙
默认宽度和高度就是内容本身的宽度和高度.
高度、宽度、外边距以及内边距都可以控制

6.4 元素显示模式的转换

转为块元素： display:block;
转为行内元素：display:inline;
转为行内块元素：display:inline-block;
写在选择器里

七、列表属性

7.1 list-style-type

用来指定列表项标记的类型
ul无序列表: 默认实心圆形

circle 空心圆形

square 正方形

none 无标记

ol有序列表：默认数字(1 2 3)

upper-roman 罗马数字(I II III)

lower-alpha 小写字母(a b c)

none 无标记

7.2 list-style-image

用来将列表项标记换成指定的图片

八、边框属性

8.1 border-style

none : 　无边框
hidden : 　隐藏边框
dotted : 点线
dashed : 虚线
solid : 　实线
double : 　双线边框
groove : 　3D凹槽
ridge : 　菱形边框
inset : 　3D凹边
outset : 　3D凸边

8.2 border-width

设置边框的宽度，单位px

8.3 border-color

设置边框的颜色

8.4 单独设置各边样式

p {
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

也可以用border-style : top right bottom left 来简化设置

8.5 border 、border-top.....

border简写属性在一个声明中设置所有边框属性
border-top......设置某条边的所有属性

顺序为：border-width、border-style (required)、border-color
border-style 是必须的其余的如没填就是默认值

九、盒子模型

9.1 内边距Padding

padding-top 单位px

padding-right

padding-bottom

padding-left
padding 简写属性在一个声明中设置所有内边距属性
- padding:5px; 一个值，代表上下左右都是5px
- padding:5px 10px; 两个值，代表上下是5px，左右是10px
- padding:5px 6px 7px 8px; 四个值，按照上右下左的顺时针顺序

9.2 外边距Margin

margin -top 单位px

margin-right

margin-bottom

margin-left
margin简写属性规则与padding一致
实现让块元素在该行内水平居中：①必须设置width ②左右边距都设置为auto
行内元素及行内块元素水平居中只需要在父容器中text-align: center 即可

9.3 注意

容器的height和width属性本质上设置的是Content框的大小，整个盒子的大小还要加上外边距、边框、内边距
除非没有设置盒子的height/width，否则只要设置了内边距就会撑大盒子，如果超出了盒子的大小就不填充内边距了
外边距合并问题(两种情况)
- 同一垂直线上的两个盒子，上盒子的margin-bottom与下盒子的margin -top同时存在时，会取一个最大值，而不是叠加
  - 解决方案：
    - 将margin-bottom与margin -top相加后只设置一个盒子的外边距即可
- 当两个盒子嵌套时，父盒子与子盒子的margin -top会取一个最大值
  - 解决方案：
    - 为父元素加上边框
    - 为父元素加上内边距
    - 为父元素添加overflow: hidden，一般使用这种，上面两种都会改变盒子的大小
清除内外边距：
```
* {
  padding: 0;
  margin: 0;
}
```

十、表格属性

10.1 表格边框

设置显示边框

table,
th,
td {
  border: 2px solid red;
}

合并边框(border-collapse两个值：collapse为合并、separate为分开)
```
table {
  border-collapse: collapse;
}
```

10.2表格宽度和高度

width设置table或th或td的宽度，单位px或者%
height设置table或th或td的高度，单位px或者%

10.3 表格文字对齐

text-align设置水平对齐方式

left、right、center(default)
vertical-align设置垂直对齐方式

top、bottom、middle(default)

10.4 表格颜色

background-color 设置背景颜色
color设置文字颜色

10.5 表格填充

padding 用来控制边框和表格内容之间的间距，单位px

十一、浮动

多个盒子纵向排列找标准流，多个盒子横向排列找浮动

11.1 float属性

用来使当前元素成为浮动框，使其浮动到一边，直到左边缘或右边缘触及父容器或另一个浮动框
三个值：left (向左浮动)、right (向右浮动)、none (不浮动)
一般是先用一个标准流的父容器规定元素上下位置，再在里面使用浮动元素排列左右位置
元素浮动只会影响它下面的盒子，不会影响它上面的盒子

11.2 清除浮动

清除浮动清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的盒子
方法一：在浮动元素的末尾添加一个新标签例如<div style="clear:both"></div>
方法二：父元素添加overflow属性，将其值设置为 hidden 或 auto 或 scroll
应用：当父元素只指定宽度，高度需要依靠子元素的大小和数量而定时，浮动子元素需要自动换行，这时就需要清除浮动

十二、定位

定位 = 定位模式 + 边偏移

12.1 边偏移

top: ..px：距离参考系的上边界多少像素
bottom: ..px：距离参考系的下边界多少像素
left: ..px：距离参考系的左边界多少像素
right: ..px：距离参考系的右边界多少像素

12.2 定位模式--静态定位

position: static;：静态定位，按照标准流摆放位置，没有角偏移

12.3 定位模式--相对定位

position: relative;：相对定位，移动的时候的参照点是原来位置
移动后原来的位置继续占有，不脱标
应用：给绝对定位当父元素

12.4 定位模式--绝对定位

position: absolute;：绝对定位，移动的时候参考点是最近一级且有定位的祖先元素（任何一种定位模式都可以）
如果没有祖先元素或者祖先元素都没有定位，就以浏览器为参考点
移动后不占有原来的位置，脱标
绝对定位的盒子实现水平居中：
- left: 父盒子一半的宽度
- margin-left: 本盒子的一半宽度

12.5 定位模式--固定定位

position: fixed;：固定定位，移动时参考点是浏览器的浏览器的可视窗口，不会随着滚动条滚动
父元素不会影响固定定位的位置
移动后不占有原来的位置，脱标
小技巧：固定到版心右侧
- left: 50%;：边位移走到浏览器可视区域一半
- margin-left: 405px;：外边距再走主内容一半的距离(400px)，再加5px让两个盒子有一点距离

12.6 定位模式--粘性定位

position: sticky;：粘性定位，先在初始设置的位置呆着，如果页面将这个添加了粘性定位的盒子滑出了可视界面之外，这个盒子就会粘着上边沿显示，称为一个固定定位，移动时参考点是浏览器的浏览器的可视窗口
移动后占有原先位置
必须添加一个边偏移后粘性定位才会生效

12.7 5种定位模式总结

12.8 定位叠放顺序 z-index

z-index: 正整数、负整数或0;：数值越大，盒子越在上面
如果属性值相同，则按照书写顺序，后来者居上

12.9 定位的特殊特性

行内元素添加绝对或固定定位后，因为脱标了，所以可以直接设置高度和宽度
块级元素添加绝对或固定定位后，因为脱标了，所以默认大小是内容大小
浮动元素和绝对或固定定位因为脱标了，都不会触发外边距合并问题

12.10 绝对或固定定位和浮动都脱标了，但有一些小区别

浮动元素会压住它下面标准流的盒子，但是不会压住下面标准流的盒子里面的文字，文字会围绕着浮动的盒子显示
绝对定位会压住下面标准流的所有内容

十三、元素的显示与隐藏

13.1 display

display: none：隐藏元素，并不再占有原来的位置
display: block：除了有转换为块级元素的作用之外，还有显示元素的意思

13.2 visibility

visibility: hidden：隐藏元素，但仍然占有原来的位置
visibility: visible：显示元素

13.3 overflow

overflow: hidden：隐藏溢出此元素的文本，且不再占用溢出的位置
overflow: visible：显示溢出此元素的文本
overflow: scroll：显示滚动条，不管是否溢出
overflow: auto：溢出的时候才显示滚动条，不溢出就不显示滚动条

zunf

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

1.1语法格式：标签名 {} 会将此页面中所有的此类标签都选中1.2语法格式：.类名 {}在HTML标签中使用class="类名"来继承类，class="类名1 类名2"来继承多个类类可以被多个标签调用类名有多个单词时用短横线'-'分割见名知意，特定场景用以下类名：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center。
复制链接

扫一扫