css标签用法基础总结

最新推荐文章于 2024-07-09 15:59:19 发布

Yearning、

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量761

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_42566428/article/details/125115595

版权

跟着哔哩哔哩up主黑马程序员讲解的css课程总结的课程笔记和主要标签总结

css写在style标签中加在head里

1.基础选择器

style内用
（1）标签选择器：用html中定义的标签作为选择器名称标签名{}
（2）类选择器：类名{} ，同时在标签上加class属性属性值为类名一个标签可用多个类选择器其中用空格隔开
（3）id选择器： #+id属性名字， style中定义 #属性名，标签中加id属性 id类似身份证号码在页面上是唯一的
（4）通配符选择器：*{css属性名：属性值} 找到页面上所有的标签，设置样式，一般用于清除默认间距

2.字体和文本

1.字体样式
（1）字体大小 font-size 数字+px 默认16px
（2）字体粗细 font-weight 100-900的整百数正常为400 加粗为700
（3）字体样式 font-style （倾斜）正常值normal 倾斜italic
（4）字体类型 font-family （微软雅黑...）
（5）字体类型 font属性连写 font:italic 700 16px 宋体; 属性连写中间用空格隔开
line-height行高

2.文本样式

（1）文本缩进 text-indent 数字+px 数字+em（em代表一个字）
（2）文本水平对齐方式 text-align （left左对齐 center居中对齐 right右对齐 justify：内容两端对齐）
（3）文本修饰 text-decoration 属性：下划线underline 无装饰线none
（4）行高 line-height 两种表达方式： 1.数字+px 2.倍数（当前标签font-size的倍数）

chrome调试工具（谷歌浏览器）调试代码
elements是标签 styles是css

3.颜色和居中

（1）字体和文本样式文字颜色color 背景颜色background-color
（2）标签水平居中 margin:0 auto （固定宽度）

3.选择器

1.后代选择器; 空格选择器1 选择器2{css}

包括div内的所有后代p，包括n代后代 div p{}

2子代选择器： > 选择器1>选择器2{css}

精准依次选择后代 div>p>a{}

3.并集选择器：，选择器1，选择器2{css}

同时定义多个选择器 p1,p2,p3{}

4.交集选择器：用标签选择器和类选择器同时表示对象

直接连这写，中间啥都不加 p.box

5.hover伪类选择器：选择器：hover{css}

定义鼠标悬停到标签的效果任何标签都可添加伪类

6.Emmet语法：快捷键（1）html符号 > * $ （2） css首字母

4.背景

1.背景颜色 background-color (bgc) 背景色默认是透明的

2.背景图片 background-image(bgi) background-image:url('图片路径')

3.背景平铺：background-repeat（bgr）像地板一样依次铺满区域
repeat 水平和垂直方向都平铺（默认）
no-repeat 不平铺
repeat-x 沿着水平方向平铺 x轴
repeat-y 沿着垂直方向平铺 y轴

4.背景位置 background-position (bgp)：水平方向位置垂直方向位置；
方位名词：水平方向 left center right
垂直方向 top center bottom
像素数字：例50px

5.背景相关属性连写 background: color image repeat position 均可颠倒顺序

6. 插入图：比较重要的图 img图片不需要设置尺寸
背景图：不重要的，起修饰作用 background-image在盒子里面需要设置盒子的尺寸，不能撑开div盒子

5.显示模式

1.块级元素宽度默认100% 独占一行，一行只能显示一个如div p h ul li dl dd form header

2.行内元素宽高不生效尺寸和内容的大小相同如span a b u i strong ins em del

3.行内块一行可以显示多个，可以设置宽高如img input textarea button select

4.模块转换如果标签选错可以元素显示模式转换
*转换成块级元素 display:block
*转换成行内块元素 display:inline-block
转换成行内元素 display:inline

6.css特性

1.继承性给父级加属性，子级也就继承了父级的属性
2.层叠性后边的属性覆盖前面的属性（优先级相同时，才通过层叠性判断结果）
3.优先性一个标签使用多个选择器加属性
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

4.排错：在浏览器中检查问题
5.pxcook基本使用：量尺寸

7.盒子模型：布局（重点）

概述：每一个标签，都可以看成一个“盒子”
由内容区域content、
内边距区域padding：填充泡沐，出现在内容和盒子边缘之间
边框区域border ：边框线，纸箱子
外边距区域margin：两个盒子之间盒子外面组成

1.边框border 复合属性
border：10px soild red; 快捷键：bd+tab
其中属性：soild实线 dashed虚线 dotted点线
设置盒子边框的位置：border-方位名词 left right top botton

2.内边距padding 属性最多取四个值
取四值时：代表上右下左内边距
取三值时：代表上左右下内边距
取两值时：代表上下左右内边距
取一值时：应用全部
自动内减：盒子属性box-size:border-box; 浏览器会自动计算多余的大小，自动在内容中减去
保持设置的盒子大小，减去内容尺寸

3.外边距margin （写法如同内边距padding）

4.清除默认内外边距：*{margin：0；padding：0；}

5.版心居中：网页的有效内容 margin：0 auto；

6.外边距重叠：若两盒子外边距重叠，设置其中一个盒子的margin即可
行内元素的内外边距设置，只生效水平位置，不生效垂直位置

8.结构伪类选择器

用法：利用元素的结构关系找标签（父子，兄弟）减少对类的依赖，减轻起名字的痛苦
1.E:first-child{} 代表第一个E
2.E:last-child{} 代表最后一个E
3.E:nth-child(n){} 代表任意一个E
4.E:nth-last-child(n){} 代表倒数第几个E
例 li:first-child{} 第一个li

伪元素： css模拟出来的标签用来美化页面小图小箭头之类
::before 在父元素内容的最前面添加一个伪元素例：.box::before{content:'添加';}
::after 在父元素内容的最后面添加一个伪元素

注意：在添加伪元素的类里面必须设置content属性

标准流：默认的排布方式及其特点