CSS

最新推荐文章于 2024-03-03 12:59:43 发布

YooFale

最新推荐文章于 2024-03-03 12:59:43 发布

阅读量125

点赞数

分类专栏：前端

博主原创，转发请私信。

本文链接：https://blog.csdn.net/YooFale/article/details/83144436

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.表格布局缺点：

①层级嵌套太多，一旦出现嵌套顺序错乱，就无法达到预期效果

②页面不够灵活，改动某一块，整个表格布局都要发生变化

2.HTML的块标签

div：默认占一行，会自动换行

span：不会自动换行，内容显示在同一行

3.CSS：层叠样式表

主要作用：用来美化HTML页面

html决定骨架

css决定外观

style标签中，去编写css内容，style标签最好写在head标签中。

4.CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}

ID选择器:
以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}

类选择器:
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
```

5.CSS的引入方式

外部样式: 通过link标签引入一个外部的css文件

内部样式: 直接在style标签内编写CSS代码

行内样式: 直接在标签中添加一个style属性, 编写CSS样式

案例代码：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div class="shuiguo">苹果</div>
		<div class="shucai" id="div1">黄瓜</div>
		<div class="shuiguo" style="color: blue;">香蕉</div>
		<div class="shucai">西葫芦</div>
	</body>
</html>

6.CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

float属性:
                   left
                   right

              clear属性: 清除浮动
                   both : 两边都不允许浮动
                   left: 左边不允许浮动
                   right : 右边不允许浮动
               流式布局

CSS的优先级

按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

就近原则: 哪个离得近,就选用哪个的样式

7.CSS中的其它选择器

选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

属性选择器:
a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

后代选择器: 爷爷选择器孙子选择器找出所有的后代（对爷爷标签内所有带有孙子标签的有效）

子元素选择器: 父选择器 > 儿子选择器(必须是直系才有效)

伪类选择器: 通常都是用在A标签上

a:link {color: red}       /* 未访问的链接 */
           a:visited {color: #00FF00}   /* 已访问的链接 */
           a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
           a:active {color: #0000FF}   /* 选定的链接 */

8.引入外部css