0基础CSS超详细笔记第二天

魏佳伟

已于 2023-06-03 17:40:16 修改

阅读量56

点赞数

文章标签： css 笔记前端

于 2023-06-03 17:03:17 首次发布

本文链接：https://blog.csdn.net/qq_54249255/article/details/131022941

版权

否定伪类选择器:

div:not(.box) {


}

伪元素选择器：（两个冒号）

content 可以在元素前面或者后面“加”东西。

p::before {

    content： "我表示，在段落前面放一段文字"
}

p::after {


        content：url（）


}

p::first-letter {

                font-size ：28px

}

↑ 修改第一个字母的样式。

属性选择器（^$*——分别表示开头结尾包含）

选择器+[属性=‘’]

例：

.box[type = 'text '] {

            color: red
    }

例如：CSS3属性中：选中name中以user开头的标签：

input[name^ = 'user'] {

        font-size: 28px;
        
}

CSS3属性中：选中name中以box结尾的标签：

input[name$ = 'box'] {}

CSS3属性中：选中name中包含'u'字符的标签：

input[name *= 'u'] {}

通配符选择器：

* {

}

CSS三大特性：

1. 层叠性：

即层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性即当给一个已经设置过的样式再次设置样式时，会发生层叠。

2. 继承性：

并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承

继承性中的特殊性 3.1 a标签的文字颜色和下划线是不能继承的,当做子元素 3.2 h标签的文字大小是不能继承的，在做子元素

3. 优先级

style行内属性> important>id>类（伪类、属性选择器）>标签（伪元素）

文本属性
1. color 文本颜色
CSS中通过color来改变文本颜色的方式一共有三种，

1. 单词（red，blue，black ，pink）

2.rgb（即redgreenblue）格式 rgb（0,0,0）每个数的取值在（0-255）之间，0代表不发光，值越大该越亮。只要red = green = blue 则是灰色。三个值越小越黑，越大越白。

3.rgba（即red green blue alpha（透明度）），a 的取值在0-1之间，越小越透明。越小越黑越透明，越大越白越像我。嘿嘿

4.十六进制。即（#EEFF00）,本质就是十六进制，其中EE代表red，FF代表green，00代表blue。

2.font-style
格式：font-style：italic。（设置倾斜。）

取值：1. normal 正常的（默认）

2.italic 倾斜的

3. font-weight
取值：

1.normal 正常的（默认）

2.lighter细线。

3.bold 加粗

4.bolder 加粗还粗。

5.数字取值：（100-900）————400就是normal 700就是bold。

4.font-size
5.font-family
取值：宋体，黑体，微软雅黑 serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线 sans-serif:无衬线的字体，笔画结尾是平滑的字体 monospace:等宽字体，用于代码，字体中每个字宽度相同 cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。 fantasy:装饰字体，具有特殊艺术效果的字体

格式：font-family:"微软雅黑"，“宋体”，“黑体”

简写格式——————（style weight size family）

font：italic 700px 18px "宋体"

图标
步骤，打开iconfont ，把喜欢的图标装进购物车，下载代码。下载后，将对应的文件夹放到项目目录下。在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可。

1.搜索或选择多色图标 2.选择合适的图标加入购物车 3.将图标添加至项目，没有项目创建即可4.在项目中选择symbol，生成线上链接或下载到本地 5.引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

文本装饰的属性
text-decoration：underline

取值：

1.underline

2.overline

3.line-through

4.none

水平对齐
text-align：center

取值：

1. center

2.left

3.right

首行缩进
text-indent :2em

设置或者取消字体特殊改变
text-tranform：

取值：

1. none

2.uppercase （全部大写）

3.lowercase（全部小写）

4.capitalize（首字母大写）

5.full-width类似于一个等宽字体。

字体阴影
text-shadow：h-shadow，v-shadow，blur，color

1. 水平阴影h-shadow

2.竖直阴影v-shadow

3.模糊距离blur

4.阴影颜色color

列表样式

默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em) li 元素没有设置默认的空白（行间距） dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距 dd 元素的margin-left为40px(2.5em) p 元素的margin-top，margin-bottom为16px(1em)

列表标志项（前面讲过）

列表标志项的位置

list-style-position:outside/inside

自定义设置列表标志项

list-style-image : url()

列表样式的简写

list-style:none,url(),inside