CSS基础
yund56 2025-05-23 22:21 19 浏览
CSS介绍
CSS(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言
CSS的作用
- 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式
- 控制页面布局, 比如: 设置浮动、定位等样式
CSS的基本语法
选择器{
样式规则
}
样式规则：
属性名1：属性值1;
属性名2：属性值2;
属性名3：属性值3;
选择器:是用来选择标签的，选出来以后给标签加样式
CSS的引入方式
- 行内式
- 内嵌式（内部样式）
- 外链式
行内式定义：
直接在标签的 style 属性中添加 CSS 样式
优点：方便、直观
缺点：缺乏可重用性
内嵌式定义:
在<head>标签内加入<style>标签，在<style>标签中编写CSS代码
优点：在同一个页面内部便于复用和维护
缺点：在多个页面之间的可重用性不够高
外链式定义:
将CSS代码写在一个单独的.CSS文件中，在<head>标签中使用<link>标签直接引入该文件到页面中
优点：使得CSS样式与html页面分离，便于整个页面系统的规划和维护，可重用性高
缺点：CSS代码由于分离到单独的CSS文件，容易出现CSS代码过于集中，若维护不当则极容易造成混乱
CSS引入方式选择
- 行内式几乎不用
- 内嵌式在学习CSS样式的阶段使用
- 外链式在公司开发的阶段使用，可以对 CSS 样式和 html 页面分别进行开发
CSS选择器
CSS选择器的定义
CSS 选择器是用来选择标签的，选出来以后给标签加样式
CSS 选择器的种类
标签选择器
根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置
类选择器
根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，
多个类选择器需要使用空格分割，应用灵活，可复用，是CSS中应用最多的一种选择器
层级选择器(后代选择器)
根据层级关系选择后代标签，以选择器1 选择器2开头,主要应用在标签嵌套的结构中，减少命名
id选择器
根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素
不能复用
组选择器
根据选择器的组合选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器
伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
CSS属性
布局常用样式属性
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片
如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片
border 设置元素四周的边框
如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
文本常用样式属性
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
相关推荐
- 没有获得Windows 10 20H2升级通知，怎样直接升级
-
微软公司已经正式发布Windows1020H2操作系统，在正常情况下，微软只会首先推送到少量电脑，然后一边推送一边采集遥测数据。收集遥测数据可以确定哪些电脑可以更新，哪些电脑在更新后可能会失败，微...
- 不想让人随便卸载你安装的程序，用这四招，他将无计可施
-
Windows10不提供设置删除应用程序限制的功能，有几种间接方法可以防止用户删除操作系统中的程序和游戏。一、WindowsInstaller服务使用Windows工具，可以部分限制用户的权限。如...
- 一文看懂苹果全球开发者大会 五大系统全面升级
-
来源：环球网【环球网智能报道记者张阳】北京时间6月23日凌晨1点，苹果全球开发者大会（WWDC2020）如期举行，还是那个熟悉的乔布斯剧院，依旧是高水准的视频展示，但是这届WWDC，却是苹果历史...
- 无需等待微软分批推送，23H2可借助注册表快速获取Win11 24H2更新
-
IT之家10月15日消息，Windows1124H2正在分批推送，但由于存在多种Bug，微软已经开始放缓其推送节奏。WindowsLatest发现，Windows1123H2...
- 办公小技巧:剑走偏锋 PPT中打造动态图表
-
年底到了少不了又要制作各种总结报表，为了让自己的报表与众不同，我们可以借助PowerPoint动画组件+报表的方式，打造出更为出彩的动态图表。下面以PowerPoint2016为例，介绍如何使用三维...
- 文档表格 版本差异何在
-
在办公过程中，对文档或表格的修改是司空见惯的事。那么，一份文档做了内容改动，如何知道差异在哪里？一份表格改动部分数据，如何知道哪些有所变动？不要说审阅和修订功能，因为不是所有人都会用这些功能来标注的，...
- Excel VBA自制日历组件16色可选 完美替代VBA日期控件
-
本日期组件可跟随单元格跟随窗体中ActiveX文本框组合框控件16种配色可选私信回复880日历可体验效果使用说明1打开自己需要应用日历面板的Excel表，注意必须是启用VBA的格式2在...
- 如何从交互角度读懂产品需求文档
-
作为设计师，理解产品经理提供的需求文档是交互设计工作的重要前提与起点，然而对于很多设计师来说，需求文档内容通常非常复杂，设计师们需要花费大量时间去消化、理解和归纳。本文作者结合公司示例，分析设计师如何...
- 植入让文档变得更强大
-
有效地利用文档置入技术，会让我们的常用文档功能变得更加强大，实现更加高效或有趣的应用。1.写字板文档嵌入其他文档有时，我们要组织一个大型的文档，但是这些文档的内容可能来自于不同种类的文档编辑器，比如...
- Office 2016滚动文本框 顺手就来
-
【电脑报在线】如果一页PPT内容较多无法在完全显示，就需要用到滚动文本框，在PPT2016中借助控件即可快速制作滚动文本框。在“告诉我你想要做什么”输入“文本框控件”，在搜索结果点击“文本框（Acti...
- Axure的多状态复选树
-
本文将详细介绍如何在Axure中实现一种增强型的多状态复选树组件，它不仅支持全选、半选和未选等状态，还具备动态加载、关键字筛选等高级功能。多状态复选树（Multi-StateCheckboxTre...
- 办公小技巧:PPT中控件图表巧联动
-
在利用PPT进行图表演示时，操作者有可能要与图表进行交互联动，比如通过输入数据来预测产品的生产情况等，这时就需要用到“开发工具”中的控件了。几个控件配合几句VBA代码，就可以轻松实现上述交互联动效果（...
- 用好插件——找回火狐的旧功能
-
现在的软件，特别是浏览器类软件，更新换代速度都很快，而且无论是外观界面还是系统组件都会有较大的变化，这样会让很多朋友无所适从。以大家常用的火狐浏览器为例，它就已经升级到了最新的35版，而且在新版中对很...
- 重新认识控件(二)
-
图片和文字，都是一种数据形式。我平时对文本框的录入，报错和提交的设计比较多。最近涉及到图片控件的设计，细细琢磨一下，这玩意还有一些平时没太注意的细节点，感觉对于其他控件的设计有指导意义，特此总结一下传...
- JSA宏教程——在文档中添加复合框控件
-
上一期，我们初步认识了控件Control，本节我们将继续控件的相关内容。这几期我们将逐一介绍相关控制。本节先介绍复合框（也叫组合框）Combobox。复合框的作用复合框就是一个下拉选项框，一次显示一个...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- java技术的电子书去哪看 (33)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)