CSS-01基础知识
2024-05-18 18:09:48
css基础知识
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css入门</title><!--第二种方式：（内部样式表）将样式编写在head的style 标签- 通过css 选择器选中元素并赋予样式- 只能在当前网页使用--><!--<style>p{color :red<font-size:30px></font-size:30px>}</style>--><!-- 第三种方式：外部样式表- 将样式编写在外部的css文件中，并通过link 标签引用，能够加快网页加载速度- 可以在多个网页中复用（用的较多）--><link rel="stylesheet" href="./style.css">
</head>
<body><!--css 是一个立体结构css 元素用来修改网页样式第一种方式：（内联样式，行内样式）-标签内部通过style 来设置元素样式--><p style="color: blue; font-size:30px;">我说过，我不闪躲。我非要这么做</p><p>小酒窝，长睫毛</p>
</body>
</html>
复合选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*这是在css style中的注释css 基本语法： 选择器 声明块选择器：选择页面中的元素 如 p元素，h1元素 p{} h1{} div{}声明块：设置文字的样式，由一个个声明组成，是一个名值对结构，如color：red*/h1{color:firebrick;font-size: 30;}/*#id的属性 如：#ab 下面第一句话便设置了特定的样式*/#ab{color: gold;font-size: larger;}/*.class的属性 如：.3a 给第三和第四句话设置了同样的类，可以使两句话有着同样的样式变化- 注：在定义id，class 等时。不能以数字开头*/.a3{font-size: 35px;}/*通配选择符：选择该页面的所有元素 如： *{样式设置}*//*交集选择器:同时选中满足多个条件的选择器语法：选择器1选择器2···选择器n{}如：将class 为div 的h3 字体的颜色设置为红色 h3.div{}注：交集选择器有元素选择器，必须将元素选择器开头*/h3.div{color: red;}/*并集选择器(选择器分组)：同时选择复合多个条件的元素语法：选择器1，选择器2，···选择器n{}如：将id是miss 且class是love 的字体设置为50px*/#miss,.love{font-size: 50px;}</style>
</head>
<body><h1>我还在寻找，一个拥抱，和一个微笑</h1><p>谁替我祈祷，替我烦恼</p><h2>鲁迅</h2><p id="ab">1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。</p><p>2、从来如此，便对吗？</p><p class="a3">3、小的时候，不把他当人，大了以后也做不了人。</p><p class="a3">4、时间就像海绵里的水，只要愿挤，总还是有的。</p><p>5、我好象是一只牛，吃的是草，挤出的是牛奶。</p><p>6、我们目下的当务之急是：一要生存，二要温饱，三要发展。</p><p>7、凡是总须研究，才会明白。</p><p>8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。</p><div class="div">有一份热，发一份光</div><div class="love">爱而不得，是为常态</div><p id= "miss">明明你也很爱我，没理由错过</p><h3 class="div">虽然你我下落不明，你知道我曾为你动过情</h3>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关系选择器</title><style>/*子元素选择器：选中指定父元素的指定子元素语法：父元素 > 子元素例：为div子元素p的子元素p1设置字体为蓝色注： 可以结合多个选择器使用*/div > p > p1{color: blue;}/*后代元素选择器：选中祖先元素的后代元素语法： 祖先元素 后代元素例：设置div后代元素p1字体大小为35px*/div p1{font-size: 35px;}/*兄弟元素选择器：选择兄弟元素语法：前一个 + 下一个例： 为span2设置字体颜色为红色注：这个只能选择一个兄弟元素若要选择多个兄弟元素 语法：前一个 ~ 后一个*/span1 + span2{color:red}span2~span3 {font-size:40px}</style></head>
<body><div>我是一个div<p>我是div中的p<p1>我是div中的p的p1</p1></p><span1>我是div中的span1</span1><span2>我是div中的span2</span2><span3>我是div中的span2</span3><span3>我是div中的span2</span3><span3>我是div中的span2</span3></div></body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>属性选择器</title><style>/*属性选择器：标签[属性名] 选择含有指定属性的元素标签[属性名 = 属性值] 选择含有指定属性和属性值的元素标签[属性名^= 属性值] 选择属性值以指定属性值开头的元素 标签[属性名$= 属性值] 选择属性值以指定属性值结尾的元素标签[属性值*= 属性值] 选择属性值含有某个属性值的元素*//*p[title]{color: red;}*/p[title = "cl"]{font-size: 35px;}p[title ^= "time"]{color: gold;}p[title $= "out"]{font-size: x-large;}p[title *=v]{color: lightcoral;}</style>
</head>
<body><p title="yz">1、勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。不可救药的民族中，一定有许多英雄，专向孩子们瞪眼。这些孱头们。</p><p title="cl">2、从来如此，便对吗？</p><p title="clrc">3、小的时候，不把他当人，大了以后也做不了人。</p><p title="time">4、时间就像海绵里的水，只要愿挤，总还是有的。</p><p title="timeout">5、我好象是一只牛，吃的是草，挤出的是牛奶。</p><p title="out">6、我们目下的当务之急是：一要生存，二要温饱，三要发展。</p><p title="love">7、凡是总须研究，才会明白。</p><p title= "vocal">8、愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。</p></body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>/*伪类选择器：用来描述元素的特殊状态；如第一个元素，被点击元素等:first-child 选择第一元素:last-child 选择最后一个元素:nth-child() 选择第n 个元素- nth-child(n) 选中n个元素 - nth-child(2n/even) 选中偶数列元素- nth-child(2n-1/odd) 选中奇数列元素:first-of-type 选择某一类型的第一个元素:last-of-type 选择某一类型的最后一个元素:nth-last-type() 选择某一类型的第n个元素:not() 否定，除了某类型*/ul>li:first-child{font-size: x-large;}ul>li :last-of-type{color: coral;}</style></head>
<body><ul><li>这是第零个</li><li>这是第一个</li><li>这是第二个</li><li>这是第三个</li><li>这是第四个</li><li>这是第五个</li></ul>
</body>
</html>
元素的伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a元素的伪类</title><style>/*:link 修改未访问链接的样式:visited 修改已经访问链接的样式:hover 修改鼠标移入的状态:active 用来表示鼠标点击状态*/a:link{color: red;}a:visited{color: wheat;}a:active{font-size: x-large;}a:hover{font-size: 30px;}</style>
</head>
<body><a href="http://www.baidu.com">这是已经访问的链接</a><br><br><br><a href="https://www.taobao.com/">这是未访问的链接</a>
</body>
</html>
伪元素*
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素</title><style>/*伪元素：表示页面中不真实存在的元素或位置，以 ::开头:: first-letter 表示第一个字母:: first-line 表示第一行:: selection 表示选中的内容:: before 元素的开头:: after 元素的结尾- before 和 after 必须结合content 使用*/p::first-letter{font-size: 30px;}p::first-line{background-color: tomato;}P::selection{color:darkred;}p::after{content: "@";color: bisque; font-size: 30px; }</style>
</head>
<body><p> Five score years ago, a great American, in whose symbolic <br>shadow we stand signed the Emancipation Proclamation. <br>This momentous decree came as a great beacon light of <br>hope to millions of Negro slaves who had been seared in<br>the flames of withering injustice. It came as a joyous <br>daybreak to end the long night of captivity.</p></body>
</html>
样式的继承与优先级
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>选择器的权重</title><style>/*继承：子类元素继承父类元素/祖先元素注：部分样式如背景，布局等不会继承*//*样式冲突：不同选择器选中相同元素，却设置不同的样式选择器的权重： 内联样式 > id 选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式注：比较优先级时，需要将所有选择器的优先级相加(分组选择器单独计算)在某样式之后加 !important 则获得最高优先级*/</style>
</head>
<body></body>
</html>
像素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>像素</title><style>/*像素：描述网页大小的量度百分比：所占比em : 相对于元素的字体大小计算 1em = 1 font-size 注：em会随着字体大小变化rem： 相对于根元素大小计算*//* html{font-size: 15px;}*/.box{width: 500px;height: 500px;background-color: burlywood;}.x{width: 50%;height: 50%;background-color: cornsilk;}.y{font-size: 20px;width: 10em;height: 15em;background-color: red;}.z{width: 10rem;width: 15tem;background-color:springgreen;}</style>
</head>
<body><div class="box"><div class="x"></div></div><br><br><div class="y"></div><br><br><div class="z"></div>
</body>
</html>
颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*RGB:RGBA: A表示透明度十六机制的RGB值：#ff00ffHSL值： h-色相(0-360); s-饱和度(0%-100%);l-亮度(0-100%)*/.box{width: 90px;height: 60px;background-color: rgb(25, 100, 60);}.box1{width: 100px;height: 100px;background-color: rgba(255, 0,255, 0.3);}.box2{width: 100px;height: 100px;background-color:#ff0000;}</style>
</head>
<body><div class="box"></div><br><div class="box1"></div><br><div class="box2"></div>
</body>
</html>
CSS-01基础知识相关推荐
- PLC编程入门-01基础知识介绍
PLC编程入门-01基础知识介绍 PLC的组成结构 PLC编程语言: PLC输入输出的特点 输入 输出 PLC的组成结构 简图 明细图 CPU:控制器和运算器本身就是CPU主要组成部分,和PC的CPU ...
- css面试基础知识,CSS知识点与面试题解析
前言 CSS 和 HTML 是网页开发中布局相关的组成部分,涉及的内容比较多和杂乱,本小节重点介绍下常考的知识点. 选择器的权重和优先级 CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一 ...
- html+id选择器如何使用方法,id选择器_HTML+CSS前端基础知识教程_腾讯视频
更多资料源码请加3252897743第1天 html 1.HTTP协议 2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
- html导航教程视频,导航_HTML+CSS前端基础知识教程_腾讯视频
更多资料源码请加3252897743第1天 html 1.HTTP协议 2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
- css样式子绝父相,子绝父相_HTML+CSS前端基础知识教程_腾讯视频
更多资料源码请加3252897743第1天 html 1.HTTP协议 2.html是纯文本3.html骨架4.DTD文档类型5.head标签6.body标签7.html基本语法8.h系列的标 ...
- C语言基础-01 基础知识
一.C语言的特点 二.最简单的C语言程序 1.基础知识 (1)scanf: 输入,从命令行将用户输入的值,保存到变量中. int x = 0: scanf("%d" ,&x ...
- CSS前端基础知识梳理
一.CSS介绍 (1)CSS:层叠样式表. (2)CSS(Cascading Style Sheets) 就是用来美化样式的!!! (3)CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于 ...
- CSS层叠样式表基础知识整理
CSS 概述 概念 Cascading Style Sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,同时生效 优点 功能强大 将内容的展示和样式的控制分离 降低耦合度 让分工 ...
- 【WEB】CSS常用基础知识
CSS定义与注意事项 CSS -了解- 层叠样式表,Cascading Style Sheets 注意事项 每个CSS样式由两部分组成 选择符(器) 和 声明 声明由两部分组成 属性 和 属性值 声明 ...
- python编程01 -- 基础知识
简介 本文主要对运用的python语言知识进行归纳和回顾使用,不定期更新,主要是对语言特性.数据类型.语句块.函数.类.模块.错误.线程.进程等内容的积累 python2/python3 核心类差异 ...
最新文章
- The Interface name: -- index:21 you checked seems not up.
- linux不能到达网关,linux – 在网关服务器上,netNS可以限制一个...
- Ribbon-2通过代码自定义配置ribbon
- struts.xml 属性介绍
- Doxygen with Graphviz to generate call graph on Mac
- Vue第二部分(2)：组件的嵌套与通信
- warning：This application is modifying the autolayout engine from a background thread
- 《Cracking the Coding Interview》——第6章：智力题——题目4
- 把zabbix图形整合至运维平台
- Deep Learning 参数--学习率α、批样本数量batch_size
- java http get和post请求
- ES6学习笔记 -- 尾调用优化
- 2020-10-28网络安全之网络安全产品
- 2018年新浪微博产品笔试题目
- mysql中图书编号类型_练习1答案-数据库设计
- ThinkPad 连接无线网络几分钟后无线自动关闭
- 08. 路由器的基本配置和Talent配置
- IC卡读卡器卡号输出格式
- Game Plug-ins(2)
- 高科技公司全线受损 中国电子企业盼政府救市