css与HTML结合的方式及其基本属性

最新推荐文章于 2024-02-29 20:08:13 发布

少季池鱼

最新推荐文章于 2024-02-29 20:08:13 发布

阅读量238

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45876091/article/details/113620048

版权

本文详细介绍了CSS的基本概念及其在网页设计中的应用。包括CSS如何与HTML结合使用，内联样式、内部样式及外部样式的区别，以及如何通过选择器来设置元素样式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS百度百科
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
我简单总结： css用于美化网页

css与HTML结合的方式
内联样式：在标签内用style属性指定css代码<table style=“color:red; bgcolor=“green”;”>//不好使
内部样式：在中定义标签，在该标签中写div{意为写div标签的属性}(在body中的所有被div标签包裹的数据都将赋予这些属性值)
*简单示例

<!DOCTYPE html>
 * <html lang="en">
 * <head>
 *     <meta charset="UTF-8">
 *     <title>Title</title>
 *     <style>
 *         div{color:red;
 *         }
 *
 *     </style>
 * </head>
 * <body>
 * <div>
 *     ds
 * </div>
 * <div>
 *     ds
 * </div>
 * </body>
 * </html>

外部样式：定义css资源文件，在中定义标签，并在其中引入外部资源文件(在所有引入了该文件的HTML文件中都生效)

简单示例

 <!DOCTYPE html>
 * <html lang="en">
 * <head>
 *     <meta charset="UTF-8">
 *     <title>Title</title>
 *     <link rel="stylesheet" href="css/day1.css">//或者 引入外部资源文件<style>@import"css/day1.css" </style>
 *
 *
 * </head>
 * <body>
 * <div>
 *     ds
 * </div>
 * <div>
 *     ds
 * </div>
 * </body>
 * </html>

css语法：
选择器（筛选具有相似属性的元素，例如写div,则找到所有div标签并赋值）{属性名：属性值；
}
每一个属性定义属性后都要加;但是最后一个属性后可不加
选择器：
基础选择器：
- 1.id选择器：选择具有相同id属性值的元素，建议每个标签的id值唯一（每一个标签都有id属性，语法：在style标签中写#id属性值{}）
- 2.元素选择器：选择具有相同标签名的元素，（语法：在style标签中写标签名称{}）
  *3。类选择器：选择具有相同class属性值的元素（语法：在style标签中写.class属性值,一个页面中的class属性值可以不唯一）
扩展选择器：
`* 1.选择所有元素：*{}
- 2.并集选择器：选择器1，选择器2{}
- 3.子选择器:筛选选择器1下选择器2的元素：选择器1空格选择器2{}（即标签1包裹标签2，子选择器只会选择定义标签2的属性）
- 4.父选择器：筛选选择器2的父元素选择器1的元素：选择器1>选择器2{}（即只选择定义标签一的元素值）
- 5.属性选择器（常用于input）：选择元素名称，属性名=属性值的元素：元素名称[属性名=“属性值”]{}（</> ）
- 6.伪类选择器：选择一些元素的状态：元素：状态{}`
如
状态：link:初始化状态（没有动过）

 hover：鼠标悬浮状态（没有点击，鼠标就放在标签上）

 active：正在访问状态（点击，跳转到链接时）

 visited:被访问过状态（已跳转到链接页面）

css属性：
font-size:字体大小
color：文本颜色
text-align：对齐方式
line-height：行高
背景：background(背景图片（background:url("");）)
边框：border
尺寸：width，height
盒子模型：
外边距：margin(即两个封闭的盒子(例如矩形）小的的边框距离大的边框的距离50px)
内边距：padding（即两个封闭的盒子(例如矩形）大的的边框距离小的边框的距离50px）
默认情况下内边距会影响整个盒子的大小，这时在后面定义box-sizing:border-box,设置盒子属性，让width和height为最终盒子的大小
float：浮动：left，right,center（可让三个盒子并排在一行，比如三个盒子全部左浮动（向左对齐），写法为float：left；）