HTMLCSS基础

最新推荐文章于 2024-03-27 10:41:56 发布

bugsayend

最新推荐文章于 2024-03-27 10:41:56 发布

阅读量547

点赞数

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

本文链接：https://blog.csdn.net/qq_42707967/article/details/110485454

版权

前端专栏收录该内容

14 篇文章 2 订阅

订阅专栏

一. html css基础总结

在w3c的html文档标准中定义了一个DTD规范，先介绍一下DTD
DTD：是HTML文档类型声明，因为html从诞生至今有很多版本
DTD：是Document Type Definition的缩写，中文翻译为文档类型声明
DTD作用：DTD 指定了html超文本标记语言的规则，确保了浏览器能够正确的渲染内容
HTML5 不是基于 SGML，因此不要求引用 DTD
在html5中只需要进行声明即可

1.1 Html和Css实现一个简单页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css学习</title>
        <style type=''>
            #contain {
                margin: 0 auto;
                width: 50%;
                height: 800px;
                background-color: #d0e4fe;
            }
            h1 {
                color: orange;
                text-align: center;
            }
            p {
                font-family: 'Times New Roman';
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div id="contain">
            <h1>CSS实例</h1>
            <p>这是一个简单段落。</p>
        </div>
    </body>
</html>

使用css来设置样式
text-align: 表示文本的对齐方式
font-family: 设置html标签的字体样式
font-size:设置字体大小

1.2 Css中样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

测试！

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

1.3 Css Backgrounds(背景)

CSS背景色属性用于定义HTML元素的背景
CSS 属性定义背景效果
background-color 背景色
background-image 背景图片
background-repeat 背景平铺
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图片位置

background-color属性描述了元素的背景颜色
body {background-color: #b0c4ed;}

背景图像
background-image 属性描述了元素的背景图像,默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
body {background-image: url(‘paper.gif’);}

背景图像水平或垂直平铺，在某些情况下与文本重叠导致不协调，这总情况下可以指定图片只在某个方向平铺

body {
	background-image: url('./background.png');
	background-repeat: repeat-x;
}

body {
	background-image: url('./background.png');
	background-repeat: no-repeat;
	background-position: right top;
}

1.4 Css文本样式

文本对齐方式
text-align: center| left| right |justify

文本修饰
text-decoration none|overline|line-through|underline

文本转换
text-transform: capitalize|uppercase|lowercase

文本缩进
text-indent: 50px;

1.5 Css Fonts字体

font-family: Serif;
font-style: italic|normal|oblique;
font-size: 1em相当于16px
font-weight: 字体的粗细

1.6 Css 链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态
这四个链接的状态是：
a:link - 正常
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

1.7 Css列表

<ol>
                <li>年龄</li>
                <li>性别</li>
                <li>姓名</li>
                <li>健康</li>
                <li>爱好</li>
</ol>
<ul>
                <li>年龄</li>
                <li>性别</li>
                <li>姓名</li>
                <li>健康</li>
                <li>爱好</li>
</ul>

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

列表中也可以使用指定的图像标记

ul
{
    list-style-image: url('sqpurple.gif');
}

所有的CSS列表属性
属性描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

1.8 Css表格

如下代码建立一个简单表格

<div>
            <table id="table1">
                <tr><th>第一列one</th><th>第二列two</th></tr>
                <tr><td>11</td><td>12</td></tr>
                <tr><td>21</td><td>22</td></tr>
                <tr><td>31</td><td>32</td></tr>
            </table>
</div>
			table {
                border-collapse: collapse;
            }
            table,th,td {
                border:solid 1px black;
            }

指定CSS表格边框，使用border属性，上面使用1px宽度的黑色边框
border-collapse 属性设置表格的边框是否被折叠成一个的那一的边框

table {
                margin: 50px;
                width : 100%;
                height: 200px;
                /* text-align: center; */
                
                border-collapse: collapse;
            }
            table,th,td {
                /* vertical-align: bottom; */
                border:solid 1px black;
            }
            td {
                padding:35px;
            }
            th {
                background-color: green;
                color: white;
            }

1.9 Css盒子模型

所有的html元素都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。接下来我们看一下盒子模型：
在这里插入图片描述
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
然后我们给出一个实际的盒子案例来展示实际效果
在这里插入图片描述
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

1.10 Css中Border（边框）

border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值
边框宽度
border-width

p.one
{
    border-style:solid;
    border-width:5px;
}

边框颜色
border-color p {border-color: red;}
边框-简写属性
上面的例子用了很多属性来设置边框。
你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
border-width
border-style (required)
border-color
实例
border:5px solid red;

1.11 Css之Margin外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
在这里插入图片描述
margin的属性：
auto: 设置浏览器边距，这样做的结果会依赖于浏览器
length: 定义一个固定的margin（使用像素，pt，em等）
%：定义一个使用百分比的边距
同理padding

1.12 Css分组和嵌套选择器

分组选择器
h1,h2,p
{
color:green;
}
嵌套选择器
它可能适用于选择器内部的选择器的样式。

在下面的例子设置了三个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

bugsayend

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTMLCSS基础

一. html css基础总结1.1 Html和Css实现一个简单页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css学习</title> <style type=''> #contain { margin: 0 auto;
复制链接

扫一扫