css进阶

最新推荐文章于 2024-10-04 22:03:04 发布

PS3254616898

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量245

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/PS3254616898/article/details/130019037

版权

@TOCcss进阶

使用类选择器

语法
在这里插入图片描述
结构用class属性来进行调用

css盒子模型

使用<div来实现盒子模型

CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

Border(边框）

边框的风格
用border-style定义;none,double…等类型的边框
边框的颜色(单独使用是不起作用的，必须先定义风格）
用border-color定义：red,blue…
边框的宽度
用border-width定义：

margin没有背景颜色，是透明的可以单独改变元素的上下左右边距也可以一起改变具体格式如下：

在这里插入图片描述
也可以使用margin-left,right,bottom,top来改变某一边的属性

padding指的是内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。
在这里插入图片描述
使用方法

content即是我们所书写的内容

定位（position）

属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>

<div class="static">
该元素使用了 position: static;
</div>

</body>
</html>

在这里插入图片描述

fixed 定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

结果
在这里插入图片描述

relative相对元素移动

<style>
h2.pos_left
{
	position:relative;
	left:-20px;
}

h2.pos_right
{
	position:relative;
	left:20px;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

</html>

结果：
在这里插入图片描述

absolute绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html:

用绝对定位,一个元素可以放在页面上的任何位置

<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>

在这里插入图片描述

浮动（float）

会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。但元素只能左右浮动不能上下浮动。img{float:right}

伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。

伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
在这里插入图片描述

当链接被触发和不触发时的颜色不一样

伪类和CSS类

伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
a class=“red” href=“css-syntax.html”>CSS 语法</a

CSS 伪元素

:first-line 伪元素
“first-line” 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

伪元素和CSS类
伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

以上为css一些常用的方法

PS3254616898

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫