HTML5笔记（二）

最新推荐文章于 2024-11-04 07:45:03 发布

李小二冲啊

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量96

点赞数

分类专栏：笔记文章标签： css html5 css3 html

本文链接：https://blog.csdn.net/weixin_53380646/article/details/119235520

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

1.什么是CSS?

Css翻译过来是层叠样式表
目前发布的版本是3.0

2.css的主要作用：

如果只输入html，我们只是能把页面的结构搭建出来，样写出来的页面不美观，如果我们想调整页面中元素的宽高、颜色、排列方式等就需要来美化一下网页。
美化网页就是通过css语言来美化的。

3.css语法：

a) 格式：选择器 { 属性1:属性值1；属性2:属性值2;…}

b) 选择器：填写标签名字。比如要更改p标签的样式，那么这里的选择器就写上p。

c) 属性：填写属性单词。比如要更改文字颜色就写color单词。

4.选择器

```html
全局选择器: *{}
类选择器： .a{color:red}
群组选择器：a,b,i,u,s,em{}
标签选择器：h1{}

标签选择器

a{
    color:red;  
}
选择到a标签

类选择器

<body>
    <div class='a'></div>
</body>

<style>
.a{
    color:red;
}
</style>

类选择器支持多类名

<body>
    <div class='a b'></div>
</body>

<style>
    .a{
        color:red;
    }
    .b{
        font-size:20px
    }
</style>

5.选择器

全局选择器：  *{}
类选择器：.a{color:red}
群组选择器：a,b,i,u,s,em{}
标签选择器：h1{}

6.新学单词

单词/语句	释义
text-align:center;	实现内部文字水平方向居中（应用在块级元素上）
line-height:30px;	实现文字在竖直方向居中(要求line-height的值=height的值)（应用在块级元素上）
font-weight：900;	字体粗细
font-family	‘字体系列’

7.元素特点

<p>: 上下外边距16px
<h1>：上下外边距21.4px
<a>：字体蓝色，下划线，手
<ul>：上下外边距16px ，左内边距40px
<li>：没有上下外边距

8.居中

居中一个盒子

div{
width:100px;
margin:0 auto;
}

居中盒子内部的文字或者图片

div{
    text-align:center;
}

居中div内部的一行文字

div{
    height:40px;
    line-height:40px;
}

10.body的高度问题

body默认没有高度，高度是由内容撑起来的，如果想设置

html,body{
	height:100%;
	width:100%;
}

11.解决外边距重叠

父元素与子元素的外边距重叠，给父元素一个透明边框
border: 1px solid transparent;
等价于
overflow: hidden;

12.补充

.outer{
           width:300px;
           height:300px;
           background-color: pink;
           /* border: 1px solid transparent; */
           overflow: hidden;
           /* padding-top: 70px; */
           margin: 185px auto;