福清网站建设专家,创建网站的免费软件国内,优秀设计赏析网站,搜索引擎网站提交入口CSS#xff08;层叠样式表#xff09;是一种样式表语言#xff0c;用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。 里面的代码由 选择器 { } 组成 体验 CSS
CSS 可以让我们界面变得更加美观#xff0c;这是 CSS 的… CSS层叠样式表是一种样式表语言用于描述HTML或XML文档的呈现方式。它定义了如何在屏幕、纸张或其他媒体上显示文档的样式、布局和外观。 里面的代码由 选择器 { } 组成 体验 CSS
CSS 可以让我们界面变得更加美观这是 CSS 的一个效果展现
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {/* 文字颜色 */color: red;/* 字号 */font-size: 50px;}/style
/head
bodyp这是一个段落/p
/body
/htmlCSS 的引入方式 CSS 有三种引入方式内部样式表、外部样式表和行内样式 内部样式表学习使用 将代码写在 style 标签中 外部样式表 再单独的 CSS 文件中写代码再 HTML 中使用 link 标签引入 行内样式配合 JavaScript 使用 CSS 写在标签的 style 属性之里面
下面是这三种方式的示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./02.CSS的引入方式.css
/head
bodyp使用外部样式表/pdiv stylecolor: green; font-size: 30px;使用行内样式表/div
/body
/html选择器 因为我们一般不使用行内样式来规范标签的样式所以如何告诉浏览器我们想更改哪个标签的样式格外重要需要用到 CSS 的选择器。 标签选择器 使用标签名作为选择器选中同名的标签来设置相同的样式 例如p h1 div a img 等等
类选择器 查找标签差异化的设置标签中的显示效果 定义类选择器 .类名 使用类选择器 class“类名” 注意
类名自定义不要使用纯数字或者中文尽量用英文来命名一个类选择器可以提供多个标签使用一个标签可以使用多个类名多个类名中间用空格隔开
id 选择器 查找标签差异化设置标签的显示效果 场景id 选择器一般配合 JavaScript 使用很少用来设置 CSS 样式 步骤
定义 id 选择器 #id名使用 id 选择器标签添加 id “id 名”
同一个 id 名再一个页面只能用一次
通配符选择器 作用查找页面中所有的标签设置相同的样式 通配符选择器: * 不需要调用会自动查找页面的所有标签设置相同的样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 标签选择器 */p {color: red;}/* 类选择器 */.class {color: green;}/* id 选择器 */#p1 {color: yellow;}* {color: blueviolet;}/style/headbodyp标签选择器的使用1/pp classclass标签选择器的使用2/pp idp1标签选择器的使用2/pdiv测试通配符选择器/div/body
/html文字控制属性 通过文字控制器我们可以让界面中的文字更加的美观 这里列出常用的控制字体的 CSS 属性
描述属性字体大小font-size字体粗细font-weight字体倾斜font-style行高line-height字体族font-family字体复合属性font文本缩进text-indent文本对齐text-align修饰线text-decoration颜色color
字体大小
属性名font-size属性值常用的为 px
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {/* 谷歌浏览器默认的字体大小为 16px */font-size: 30px;}/style/headbodyp这是一个文字/pdiv这是一段文字/div/body
/html谷歌浏览器默认的字体大小为 16px
字体粗细
属性名font-weight 属性值
数字开发使用 原本的字体样式就是 400如果要设置加粗的话可以设置为 700注意不需要加 px。
关键字 字体倾斜
属性名font-style 属性值
正常 nomal倾斜 italic
行高 作用设置多行文本之间的间距 属性名line-height 属性值
数字 px只写数字当前标签的 font-size 属性值的倍数 行高包括上线间距和文本高度 从一行文字的上方到下一行文字的上方就是一个行高
让文件实现垂直居中
使得行高和盒子的高度一样
字体组
属性名font-family 属性值字体名 可以书写多个字体名中间用逗号隔开浏览器会从左到右依次查找找到哪一种就生成哪种字体。
font 复合属性 使用场景设置网页文字的公共样式 复合属性属性的简写方式一个属性对应多个值的写法各个属性之间用空格隔开 font 是否倾斜 是否加粗 字号 / 行高 字体必须按顺序书写 注意字号和字体必须书写否则 font 属性不生效
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {font: italic 700 200px / 2 楷体;}/style
/head
bodyp这是一段文字/p
/body
/html文本缩进
属性名text-indent 属性值
数字 px数字 em推荐1em 就是当前标签字号的大小
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {background-color: aquamarine;width: 600px;}p {font-size: 100px;text-indent: 2em;}/style
/head
bodydivp这是一段文字/p/div
/body
/html文本对齐方式 作用控制内容的水平对齐放hi 属性名text-align 属性值 图片居中也和这种方式相同text-align 本质是控制内容的对齐方式不只是文本内容要设置给内容的父级
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1 {background-color: aquamarine;text-align: center;font-size: 100px;}div{text-align: center;}/style
/head
bodyh1这是一段文字/h1divimg src../DAY1/jpg/Redis.jpg alt一个图片/div
/body
/html文字的修饰线
属性名text-decoration 属性值红线标注的是常用的属性。
文字的颜色
属性名color 属性值 在实际的开发工作中使用后面两种比较多。
调试工具 作用检查调试代码帮助程序员发现代码问题解决问题 打开调试工具鼠标右键选择检查或者直接按 F12 使用调试工具
复合选择器 作用 由两个或者多个基础的选择器通过不同的方式组合而成更准确更高效的找到标签 后代选择器
写法父选择器 子选择器CSS 属性富子选择器之间用空格隔开 选择的是父选择器中的所有标签如下面的代码后代中所有的 span 都被选中不管是不是直接的子代
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 */div span {color: red;}/style
/head
bodydivspan你好/spandivspan你好/span/div/div
/body
/html子代选择器
如果只想仅仅选择子代的 span 就可以使用子代选择器这样与父类间接的子类就不会被选择 父选择器 子选择器
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 *//* div span {color: red;} *//* 子代选择器 */div span {color: red;}/style/headbodydivspan你好/spanpspan你好/span/p/div/body
/html并集选择器 多组标签有相同的样式 选择器写法选择器1, 选择器2, 选择器N
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 后代选择器 *//* div span {color: red;} *//* 子代选择器 *//* div span {color: red;} */span,p {color: red;}/style
/head
bodydivspan你好/spanp你好呀/p/div
/body
/html使用,来分割两个标签不同的标签之间敲一个回车。
交集选择器了解 同时符合多个条件的元素 选择器1选择器2 两个选择器中间连这写不需要符号注意遇到标签选择器的时候要放到最前面
伪类选择器 伪类表示元素的状态选中元素的某个状态来设置样式比如我们看到网易新闻的界面当鼠标悬停在某个超链接的时候就可以给它变换颜色来告诉用户自己点击会进入哪条新闻。 鼠标悬停状态选择器:hover
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea {text-decoration: none;font-size: 10px;}a:hover {text-decoration: underline;color: blue;font-size: 10px;}/style
/head
bodya hrefhttp://baidu.com target_self跳转到百度/a
/body
/html比如上面的代码默认情况下显示的是绿色当鼠标悬停的时候就显示下划线加上蓝色
超链接拓展
超链接一共有四个状态 如果需要设置多个效果需要按照 LVHA 的顺序即上面哪个表格的顺序否则可能不生效这个访问过的状态在 target 为 _blank 是不生效的。
CSS 特性 CSS 有三个特性继承性、层叠性、优先级 继承性 子级标签默认继承父级标签的文字控制属性 在实际的应用中我们一般将文字的属性写在 body 标签里面其他需要额外设置的再去设置即可标签有自己的样式就不会在继承父级的文字属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {font: normal 700 20px/50px 宋体;}/style
/head
bodyp这是一个段落/pdiv这是一段文字/div
/body
/html层叠性
特点相同的属性会覆盖不同的属性会叠加后面的覆盖前面的
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {color: red;}div {color: blue;}/style
/head
bodydiv这是一段文字/div
/body
/html优先级 优先级也叫权重当一个标签使用了多种选择器的时候基于不同类的选择器。 这个选择器的覆盖范围越广它的优先级就越低
!important 是一个提权功能可以加到属性上看下面示例代码实际开发中慎用行内样式id 选择器类选择器标签选择器通配符选择器
从上到下优先级逐渐降低
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.div {/* 添加 !important */color: red !important;}#a1 {color: green;}/style
/headbodydiv classdiv ida1这是一段文字/div
/body
/html叠加计算规则
叠加计算如果是复合选择器需要权重叠加计算 公式每一级之间不存在仅为 行内样式id 选择器类选择器标签选择器计算这几个的个数总和。 规则 从左到右依次比较选个数同一级个数多的优先级高如果个数相同 就向后比较 !important 的权重是最高的 继承的权重是最低的
Emmet 写法 Emmet 代码的简写方式输入简写 VSCode 会自动生成对应的代码 div 比较特殊带类名可以直接 .类名来简写。
CSS大多数 CSS 的简写方式为单词的首字母和代码提示类似。
背景属性 需要设置更好看的网页效果仅仅有背景色是不够的我们可以通过设置背景图使我们的网页更有特色 背景图 网页中出现了装饰性的图片可以使用背景实现 属性名background-image 属性值url 背景图默认是平铺的效果即如果图片比盒子要小的话就会重复防止图片直到铺满为止
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 1000px;height: 1000px;line-height: 1000px;background-image: url(../DAY1/jpg/Redis.jpg);}/style
/head
bodydiv这是一段带背景图的文字/div
/body
/html背景图位置
属性名background-position 属性值水平方向位置 垂直方向位置
关键字
关键字位置left左侧right右侧center居中top顶部bottom底部
坐标数字 像素正负都可以
水平正数向右负数向左 垂直正数向下负数向上 提示
关键字取值的写法可以颠倒顺序比如我们习惯写右上方但是上右方其实也是相同的位置如果只写一个关键字的话另一个方向默认是居中的数字只写一个值表示水平方向竖直方向是居中的
背景图缩放
background-size 是CSS属性之一用于控制背景图像的大小和缩放方式。它允许你调整背景图像的尺寸以适应元素的大小或达到特定的视觉效果。 长度
可以使用像素px、百分比%、视口宽度单位vw、视口高度单位vh等指定具体的尺寸。
关键词
auto默认值浏览器根据背景图像的实际尺寸自动调整。cover缩放图像保持图像比例使其完全覆盖背景区域可能会裁剪图像。contain缩放图像保持图像比例使整个图像都可以完整地显示在背景区域内可能会留有空白。
背景图复合属性
属性名background 属性值背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 使用空格隔开属性值不区分顺序 背景图固定一般很少出现
显示模式 显示模式Display Modes是CSS中用于控制元素如何在文档布局中展示的属性。这些模式定义了元素的渲染方式、占据空间的方式以及如何与其他元素交互。 常见的显示模式
块级元素Block
默认情况下块级元素会独占一行会在前后添加换行符通过 display: block; 可以显式地设置元素为块级。
行内元素Inline
行内元素不会独占一行会在同一行上排列。通过 display: inline; 可以显式地设置元素为行内。
内联块级元素Inline-Block 1. 常见的内联块级元素包括 、 等。 2. 类似于行内元素但可以设置宽度、高度等属性且会独占一行。 3. 通过 display: inline-block; 可以显式地设置元素为内联块级。
显示模式的转化
display: none;
将元素设置为 display: none; 可以隐藏该元素使其在页面中不可见且不占据空间。 与 visibility: hidden; 不同display: none; 完全将元素从渲染树中移除而不仅仅是使其不可见。 display: block;、display: inline;、display: inline-block; 转换
修改 display 属性
可以通过修改 display 属性将一个元素从一个显示模式转换为另一个。 例如将一个块级元素转换为行内元素display: inline; 或 display: inline-block;。 display: flex; 和 display: grid; 这些是新的布局模式分别用于创建弹性布局和网格布局。 display: flex; 用于创建弹性盒子让元素更容易地进行灵活布局。 display: grid; 用于创建网格布局更容易地在二维空间中对元素进行布局。 显示模式的转化能够让开发者更灵活地控制元素的表现形式和布局方式使网页设计更加丰富和适应不同的需求。
