CSS基础知识汇总{主要内容：元素的模式分类，CSS特性}

最新推荐文章于 2022-12-04 23:22:30 发布

浅笑0104

最新推荐文章于 2022-12-04 23:22:30 发布

阅读量286

点赞数

分类专栏： HTML&&CSS

本文链接：https://blog.csdn.net/qq_40947819/article/details/105031776

版权

HTML&&CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

palcehoder的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 解决在谷歌浏览器 */
        input::-webkit-input-placeholder {
            color: red;
        }
        /* 解决在火狐浏览器中的样式 */
        input::-moz-placeholder {
            color: red;
        }
        /* 解决在ie浏览器中的样式 */
        /* 注意：之前使用的是伪元素双冒号::不生效，这里要用单冒号 */
        input:-ms-input-placeholder {
            color: red;
        }
        input.studentid:-ms-input-placeholder {
            font-style: italic;
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入姓名">
    <input class="studentid" type="text" placeholder="请输入密码">
</body>
</html>

首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    px指的是像素 浏览器分辨率，有像素点
    2em代表两个个文字大小，不管文字是多大，都生效
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>好好说说话说华好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕好好说说话说华硕v硕</p>
</body>
</html>

鼠标样式

cursor: pointer; 设置鼠标为小手模式
help 一个箭头
move 十字箭头

元素转换方式及模式转换
将标签按照自己的显示效果进行了分类：
◆块级元素
◆行内元素
◆行内块元素【在CSS标准中属于行内元素的范畴】
块级元素
☞ 代表：div,p, ul,li,ol,dl,dd,h1,h2…
☞ 特点：
✔默认情况下，如果一个块级元素没有设置宽度，那么该元素的宽度等于其父元素的宽度，高度等于其内容撑开的高度。
✔所有的块级元素都是独占一行显示
✔块级元素是可以直接设置宽度和高度
行内元素
☞ 代表： span,a,font,s,em,i,del…
☞ 特点：
◆行内元素默认宽度等于其内容的大小
◆行内元素在一行上显示。
◆行内元素不能直接设置宽度和高度
行内块元素
☞ 代表：img， input
☞ 特点：
◆可以设置宽度和高度
◆行内块元素可以在一行上显示
模式转换
☞ 转换块级元素
display: block；
☞ 转换为行内元素
display:inline;
☞ 转换为行内块元素
display:inline-block;
☞ 注意：
不要将行内块元素转化为行内元素
◆在网页中，依据网页效果，需要我们进行模式转换，我们才用模式转换
◆一般情况下，如果涉及到模式转换，都是将元素转化为块级元素或者行内块元素（一般是将行内元素进行转换）
5、伪元素
伪元素：
::before {}
::after {}
☞注意：
◆伪元素中必须设置content属性
◆伪元素属于行内元素
◆伪元素不能嵌套伪元素
◆在html标签中，before代表的就是第一个标签
◆在html标签中，after代表的就是最后一个标签
在这里插入图片描述
理解：伪元素是设置某元素里面的第一个和最后一个元素。
6、伪类选择器
◆ :hover {}
当鼠标悬停到某个标签上，设置样式。
◆a:link {} —>在IE低版本中有问题
设置标签默认链接的样式，所以这个伪类经常和a标签配合使用，和直接写a元素设置样式的方式效果一样。推荐使用a标签直接设置默认样式，因为a:link {}在IE低版本中有问题。
◆ a:visited {}
设置标签被访问过后的样式，一般也是跟a标签配合使用
注意：
:visited 有浏览器缓存问题
:visited 选择器中只能设置与颜色相关的属性
◆ a:active {}
设置标签被激活后的样式
鼠标放到元素上，一直按住鼠标左键，就是被激活。
7、CSS特性
css又叫做层叠样式表
CSS三大特性：层叠性继承性优先级
层叠性：
在同一个标签身上，如果优先级相同且设置的样式发生了冲突，那么最后定义的样式会将前面定义的样式覆盖
继承性
发生在嵌套关系的标签中
如果给父元素设置样式，子元素也受到了父元素样式的影响
总结可以被继承的属性有：
◆ color
◆ font-size
◆ font-weight
◆ 与font属性相关的可以被继承
◆ text-align
不可以被继承的属性：
◆宽度和高度不能继承
◆背景颜色不能继承
继承的特殊标签介绍：
◆a标签不能直接受父元素中的文字颜色的影响
◆标题标签（h1-h6）不能直接等于父元素中的文字大小
总结：只要是标签有自己默认的样式，都不能被继承，如斜体em标签。
优先级
通配符选择器<标签选择器<类选择器<ID选择器<行内样式<!Important
◆继承的权重为0（可以理解为对标签本身设置的样式大于继承过来的样式）
◆权重可以叠加（选择器指向同一个标签的时候）
8、背景
复合属性

background-color:  设置背景颜色
background-image：url(路径)  设置背景图片
background-repeat： 设置背景图片平铺方式
					repeat
					no-repeat
					repeat-x
					repeat-y
background-position: 设置背景图片位置
 注意：
	◆如果设置一个值，第二个值默认代表垂直居中
	◆该属性可以同时设置具体值和具体的关键字
	◆如果设置的值中包含具体数字，第一个值代表的是水平方向，第二值代表的是垂直方向。

在这里插入图片描述
属性联写：

注意没有属性个数的限制、没有顺序的限制
9、结构伪类

:first-child {}    选中父元素中第一个子元素
:last-child {}    选中父元素中最后一个子元素
:nth-child(n) {}  选中父元素中第n个子元素
:nth-last-child(n)	 {}   选中父元素中倒数第n个子元素	
注意：n可以设置具体值、n可以是一个关键字  even | odd、n可以是一个表达式： an+b

10、目标伪类
在这里插入图片描述
我认为该方法在使用的时候有缓存问题
11、属性选择器
通过标签的属性选中标签：

12、伪元素选择器

::first-line {}选中标签中第一行文本

::first-letter {}选中第一个文本

在这里插入图片描述
去掉列表标签前面默认的样式：

 list-style:none;

浅笑0104

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识汇总{主要内容：元素的模式分类，CSS特性}

1、palcehoder的兼容性问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫