HTML03—样式、BOX模型、背景色

最新推荐文章于 2022-11-11 16:46:44 发布

阿鑫君_ty

最新推荐文章于 2022-11-11 16:46:44 发布

阅读量736

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/qq_34807258/article/details/74188600

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS

方式
内联方式：样式定义在单个HTML元素中
内部样式表：定义在HTML页的头元素中
外部样式表：将样式定义在外部的css文件中,HTML页引用
相同的样式，如果重复定义，以最后一次为准
类选择器
.className{ color:red; }
可用于多个不同元素使用同样的样式使用类选择器
类选择器和元素选择器结合：元素选择器.className{}
id选择器

id{}

04.css

p {
    background-color: silver;   
}

HTML页面

<title>css样式</title>
<link rel="stylesheet" type="text/css" href="04.css">
<style type="text/css">
h2 {
    color:green;
}
.s1 {
    color:red;
}
.s2 {
    font-size: 25pt;
}
#shopCar {
    color:red;
}
#d1 > p{
    color:blue;
}
<!--未被访问的超链接-->
a:link{
    color:blue;
}
<!--已被访问的超链接-->
a:visited {
    color:red;
}
<!--鼠标悬停在元素上-->
a:hover{
    color:yellow;
}
</style>
</head>
<body>
    <h1 style="color:red;font-size:20pt;">css的使用</h1>
    <h2>内部样式使用</h2>
    <p>外部样式使用</p>
    <p>先创建一个<span class="s1">css</span>文件</p>
    <!--class类选择器  -->
    <p>将css文件引入</p>
    <p class="s2">可以使用class的类选择器选择元素，设置样式</p>
    <h2 id="shopCar">购物车</h2>
    <div id="d1">
        div标签
        <p>这里是段落标签</p>
    </div>
    <a href="#">伪类选择器</a>
</body>
</html>

border
border:width值 style值 color值
单位：-%：百分比; -pt：磅（1pt=1/72英寸）;-px：像素（屏幕的一个点）;-em：1em当前字体，2em当前字体2倍
文本格式化
font-size:字体大小
font-weight:字体加粗（normal/bold）
text-align:排列(left/right/center)
line-height:行高
text-indent:2em;首行缩进2

p{
    text-align:center;
    color:blue;
    line-height:1.6em;
    text-wight:bold;
}

BOX模型
padding:内边框边距
margin:外边框边距
背景色
background-color：为元素设置背景色
背景图片background-image: url(“images/ceci_9.gif”);

阿鑫君_ty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML03—样式、BOX模型、背景色

CSS方式内联方式：样式定义在单个HTML元素中内部样式表：定义在HTML页的头元素中外部样式表：将样式定义在外部的css文件中,HTML页引用相同的样式，如果重复定义，以最后一次为准类选择器 .className{ color:red; } 可用于多个不同元素使用同样的样式使用类选择器类选择器和元素选择器结合：元素选择器.className{} id选择器
复制链接

扫一扫

专栏目录