CSS学习

最新推荐文章于 2024-05-30 08:41:06 发布

2a3b4c

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量128

点赞数

分类专栏： Web 文章标签： CSS 选择器盒子模型样式

本文链接：https://blog.csdn.net/lr1916417519/article/details/85720477

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

CSS

层叠（级联）式样式表
cascade style sheet
作用：用来美化网页

[1]颜色相关的样式

1)前景色

color:==单词：== 例如：red,yellow
      ==16进制：== 格式是#红绿蓝  每个颜色范围是0~FF
        例如：color:#00ff00是纯绿色
      ==rgb(红色，绿色，蓝色)：==  每个参数的范围是0~255
        例如：rgb(255,0,0)是纯红色
      ==特殊取值==：白色 rgb(255,255,255)
                   黑色 rgb(0,0,0)

2)背景色

backgrounp-color:颜色

3)背景图

background-image:url(图片地址)
background-repeat:no-repeat(不重复) repeat-x repeat-y在哪个轴上重复
<body style= "background-image:url(1.gif);background-repeat:no-repeat">

[2]盒子模型

1)margin外间距

margin-left外左间距
margin-right外右间距
margin-top外上间距
margin-bottom外下间距

2)padding内间距

padding-left内左间距
paddig-right内右间距
padding-top内上间距
padding-down内下间距

3)border边框

border-left左边框
border-right右边框
border-top上边框
border-bottom下边框

<div style="background-color: coral;height: 60px;padding-left: 500px;border:black 10px solid;margin-bottom: 10px"></div>

[3]定位方式

div position:absolute;绝对定位
坐标的原点在左上角
left:x轴的坐标
top:y的坐标
z-index:z轴的坐标，取值越大，越靠屏幕外层
width:宽度
height:高度

<div style="background-color: darkturquoise;height:100px;width: 100px;position: absolute;left: 0;top: 0;z-index:0"></div>

[4]字体相关

font-size：字体大小
font-family:字体种类（电脑端事先需要有这个字体）
font-style:字体形式
font-style:italic倾斜
font-weight:加粗
text-decoration:line-throught贯穿线
text-decoration:underline下划线

<p style="font-style: italic;font-weight: bold">字体形式是倾斜italic,而且bold是加粗</p>
<span style="text-decoration: line-through">原价999</span>
<span style="font-size: 24px;color: crimson;text-decoration: underline">现价只要998</span>

[5]显示隐藏

display：none;隐藏
display：block;显示(默认显示)

[6]样式表

1.类选择器

.名字之后使用标签的 class=“名字引用”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第四个网页</title>
    <style>
        /*样式表，定义一个有名称的样式，之后标签内可以根据此名称进行引用 用class="名字“引用*/
        /*名字的更专业叫法：选择器（selector)*/
        .cl{color: black;background-color: aliceblue}
    </style>
</head>
<body>
<p class="cl">段落1</p>
</body>
</html>

2.ID选择器

根据标签的id属性来进行匹配
#id值之后使用标签的 id=“id值”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第四个网页</title>
    <style>
        #t1{color: antiquewhite;font-size: 30px}
    </style>
</head>
<body>
<p id="t1">段落2</p>
</body>
</html>

3.元素选择器

根据标签的名字进行匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第四个网页</title>
    <style>
        span{color: darkturquoise;font-family: "Lucida Calligraphy";font-size: 40px}
    </style>
</head>
<body>
<span>String</span>
</body>
</html>

优先级

如果不同的选择器匹配到了同一个元素：

style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器优先级最低
同级选择器，后定义的优先
可以用 !important 改变优先级，可以把优先级提升到最高

4.父子选择器

要求：找到一个P标签，并且它的父标签必须是div
格式：父标签>子标签 div>p{color:blue;}

5.祖先后代选择器

格式：祖先标签后代标签

6.伪类选择器

按钮鼠标移入改变样式，鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第五个网页</title>
    <style>
        #t1:hover{background-color:blue;color: antiquewhite;}
        .cl:focus{background-color: coral;color: black}
        
    </style>
</head>
<body>
<input id="t1" type="button" value="按钮">
<input class="cl" type="text">
</body>
</html>

2a3b4c

关注

0
点赞
踩
0

收藏

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

文章目录CSS[1]颜色相关的样式1)前景色2)背景色3)背景图[2]盒子模型1)margin外间距2)padding内间距3)border边框[3]定位方式[4]字体相关[5]显示隐藏[6]样式表1.类选择器2.ID选择器3.元素选择器优先级4.父子选择器5.祖先后代选择器6.伪类选择器CSS层叠（级联）式样式表cascade style sheet作用：用来美化网页[1]颜色相关的样...
复制链接

扫一扫