【实习第三天】css的应用
2024-04-23 14:09:19
1.css简介
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 网页分成三个部分html 结构 30个左右标签，先用一段时间css 表现 外在显示的样子js 行为 html 超文本语言css -层叠样式表-网页实际上是一个多层的结构，css可以通过给每一层结构做样式，最终你看到的是最上面的一层你要找的是，找对追求目标，然后各种花招追求她（他）-->
</body>
</html>2.css书写位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 书写位置、各自的优缺点 --><!-- 第二种方式：内部样式表书写位置：head标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式，可以写多组样式，样式之间用;隔开，最后一个样式可以不用，但一般都加上优缺点：缺点：复用率不高注意：写css比较多的时候不推荐使用但教学期间用的比较多1--><!-- 第三种方式：外部样式表书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中对应的html结构，在{}中书写css样式，然后在head标签内写一个link标签将对应的css文件引入到html文件内注意：推荐使用--><link rel="stylesheet" href="./02.css书写位置.css"><style>p{color: purple;background-color:pink;font-size: 30px;}</style>
</head>
<body><!-- 第一种方式：内联样式/行内样式书写位置：开始标签 style属性，将css属性值卸载style属性值里面可以写多个样式，只要用分隔号;隔开即可优缺点：优点：有针对性缺点：1、结构和表现耦合了2、修改起来不方便注意：不推荐使用--><!-- 语法：样式名，样式值color 设置字体的颜色 red green yellowfont-size 设置字体的大小 pxbackgroundcolor 设置背景颜色 red green yellow--><div style="color: red;font-size: 20px;background-color: yellow;">姑人程系那会的光欲才不，人派低回国师人才，乐办主君，弄巴别。</div><p>瞠吞未回太者次一月如句妙统，人知和要张。</p><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, delectus!</h1>
</body>
</html>3.css语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* css注释符号 *//* CSS的注释，作用和HTML类似，只不过它必须编写在style标签中，或者是css文件中CSS语法：选择器 声明块选择器：有多种选择器声明块：具体的css样式，是写在花括号里面样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开*/</style>
</head>
<body></body>
</html>4.css常用选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">/* 四种常用的选择器 *//* 需求一：标题变红色 *//* 1、元素选择器（标题选择器）作用：选中对应标签的内容语法：标签名{css样式.....}例子：h1{}，h3{}，p{}*/h1{color: red;}h3{background-color: green;}p{font-size: 24px;}/* 需求二：将第一句诗变绿色 *//* 2、id选择器作用：选中对应id属性值的内容语法：#id属性值例子：#p1{},#p2{}····注意：id的属性值不能重复使用*/#p1{color: green;}#p2{color: red;}/* 需求三：将第二句诗也变绿色 *//* 3、class选择器class选择器的用法跟id选择器是一样的，只不过class属性值可以重复使用作用：选中所有class属性值的内容语法：.class属性值{}注意：class属性值可以起多个，中间用空格隔开即开例子：.s1{}，.ss{}，.pp{}*/.s1{color: green;}#p2{color: green;}/* 需求四：给所有的标签字体变为24px *//* 4、通配选择器作用：选中所有标签，进行设置 语法：*{} */</style>
</head>
<body><div><center><h1>登高</h1><h3>杜甫</h3></center><p id="p1">视着皇龄间笔，罚有仍一未有大将降单，年。</p><p class="s1">忧且范即王壬问陀着重以开九文先最，赐者。</p><p>话妄开韩者量搏尚有我不平朋要，和是时道。</p><p>夭保掉者故感第临是妄胜，梵保惊出，台动。</p></div>
</body>
</html>5.css复合选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 复合选择器两种 交集选择器，并集选择器 *//* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px *//* 1、交集选择器作用：选中同时符合多个条件的内容语法：选择器1选择器2选择器3......{}注意：如果选择器当中有元素选择器，元素选择器必须放在最前面例子：p#p1.pp{}，div.ss{}*/.red{color: red;}div.red{font-size: 24px;}/* 需求二：将h1，h3字体颜色变为黄色 *//* 2、并集选择器（群组选择器）作用：同时选中对应的内容语法：选择器1，选择器2，选择器3......{}例子：.red,#red1,div,p{}*/h1,h3{color: brown;}</style>
</head>
<body><h1>承志领活。</h1><h3>守秦</h3><p class="red">使司样名人其真，的。</p></body>
</html>6.关系选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 用关系选择器来选中 *//* 需求一：为div的子元素h1设置一个字体颜色红色 *//* 1、子元素选择器作用：通过指定的父元素找到指定的子元素语法：父元素>子元素{}例子：#red>.green{}， .pp>em{}*/div>h1{color: red;}/* 需求二：div里的span元素字体都变为30px *//* 2、后代选择器作用：通过指定的祖先元素找到指定的后代元素语法：祖先元素 后代元素{}例子：.class .red{}， #red p{}*/#cs span{font-size: 30px;}/* 需求三：通过衣服p标签找到生鲜区，加背景色粉色 *//* 3、下一个兄弟选择器作用：通过指定的兄长找到紧挨着我的兄弟语法：兄+弟{} */.p1+span{background-color: pink;}/* 需求四：通过衣服区找到下面所有的兄弟，设置字体的颜色棕色 *//* 4、选择下面所有的兄弟选择器作用：通过指定的兄长找到下面所有的兄弟语法：兄~弟{}例子：#red~.p1{}*/.p1~span{color: brown;}/* */</style>
</head>
<body><div id="cs">大超市<h1>日常用品曲</h1><h1>美妆区</h1>><p class="p1">衣服区<span>女装<em>上衣</em><em>裤子</em><em>裙子</em></span><span>男装</span><span>童装</span></p><span>生鲜区</span><span>零食区</span></div><p>小超市</p><!-- 元素之间的关系父子关系父元素 直接包含子元素的元素子元素 直接被父元素包含的元素祖先后代关系祖先元素 直接或间接包含元素的元素，包括父元素后代元素 直接或间接被包含的元素，包括子元素兄弟关系拥有共同父元素的元素-->
</body>
</html>7.属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 需求一：有title属性的p标签，颜色变为红色 */p[title]{color: red;}/* 1：属性选择器通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性语法：1、[属性名]{} 选择含有指定属性的元素2、[属性名=属性值]{} 选择含有指定属性和属性值的元素3、[属性名^=属性值]{} 选择属性值以指定值开头的元素4、[属性名$=属性值]{} 选择属性值以指定值结尾的元素5、[属性名*=属性值]{} 选择属性值包含指定值的元素*/</style>
</head>
<body><h1 title="a" id="aaaa">啊大大大</h1><h3 title="b">啊嘻嘻嘻</h3><p title="ab">啊打发傅海峰</p><p title="abc">安徽发发发卡</p><p>啊大人物方法是</p>
</body>
</html>【实习第三天】css的应用相关推荐
- 您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
- Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
目录 一.CSS和HTML 二.CSS的基本语法格式 三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件 四.多重样式优先级 结语 一.CSS和HTML CSS,又称为层叠样 ...
- css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度 ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
- 前端开发实习面试题（CSS篇）
目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...
- CSS初识(三)：CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
- 2017年要学习的三个CSS新特性
这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...
- 学习笔记（三）——CSS进阶
在网页的布局和页面元素的表现方面,要掌握的最重要的概念是css的盒子模型(BoxModel)以及盒子在浏览器中的排列(定位),这此概念用来控制元素在页面上的排列和显示方式,形成CSS的基本布局. 文章 ...
- 大数据WEB阶段（三）CSS
CSS 一.概述 css: 层叠样式表 , 可以用来美化html页面 .可以实现html代码和设置样式的css代码的分离 .增强了页面的显示能力. 二.在html中引入css样式的方式 内嵌式 大多数 ...
最新文章
- mysql-cluster 安装配置
- ExtJS在树TreePanel之间拖放结点
- Python3 格式化输出 %s %d 等
- 获取iOS设备当前ip地址
- 9月26日云栖精选夜读：阿里Java代码规约插件即将全球首发，邀您来发布仪式现场...
- Git基本理论、项目搭建、文件操作以及分支介绍
- STM32工作笔记0053---STM32串口寄存器库函数配置方法+串口通信实例
- map.entryk,v小用法（转）
- Proteus 8.12 仿真软件安装（Proteus8.6Proteus8.14下载）
- 计算机win10分区软件,分区工具哪个好? win10系统分区助手值得拥有
- 2021年低压电工复审考试及低压电工模拟考试
- mysql数据库技术答案_高校邦《MySQL数据库高级技术》全套答案
- IF：11+ 鳞癌基因标记预测肺腺癌患者的预后和免疫治疗的敏感性
- u盘占内存，却找不见内容
- 【华为校园招聘】2019春实习模拟试卷 软件题demo
- Windows系统查询遗忘的WiFi密码
- Hdu 2036 改革春风吹满地
- 计算机主板最新芯片组品牌,最新的主板芯片组排行榜【详解】
- 数据库IP网络切换问题
- 乔布斯在斯坦福大学演讲稿英文_TED精选 | 小“乔布斯”Thomas Suarez：一名12岁的手机应用开发者！...