当前位置: 首页 > news >正文

cssDay1

CSS

如何学习

  1. CSS是什么
  2. CSS怎么用(快速入门)
  3. CSS选择器(重点+难点)
  4. 美化网页(文字,阴影,超链接,列表,渐变...)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效 了解)

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页 定位,网页浮动

发展史

CSS1.0

CSS2.0 DIV(块)+CSS HTML和CSS结构分离的思想,网页变得简单,SEO

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画... 浏览器兼容性~ 

快速入门

练习格式:image

建议使用这种规范

image

css的优势:

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO,容易被搜索引擎收录!

CSS的三种导入方式

image

拓展:外部样式两种方法

  • 链接式
  • 导入式(不推荐使用) CSS2.1

image

选择器

作用:选择页面上的某一个或某一类元素

基本选择器(重要)

  1. 标签选择器:选择一类标签

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title><style><!--标签选择器,会选择页面上所有这个元素的标签-->h1{color: coral;background: red;border-radius: 24px;}p{color: aqua;font-size: 80px;}</style>
    </head>
    <body><h1>学Java</h1>
    <h1>学Java</h1>
    <p>听狂神说</p>
    </body>
    </html>
    
  2. 类选择器 class:选择所有class属性一致的标签,跨标签 .类名{}

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8">好处:可以多个标签归类,是同一个class,可以复用*/.qinjiang{color: red;}.kuangshen{color: coral;}</style>
    </head>
    <body><h1 class="qinjiang">标题1</h1>
    <h1 class="kuangshen">标题2</h1>
    <h1 class="qinjiang">标题3</h1>
    </body>
    </html>
    
  3. id选择器:全局唯一! #id名{}

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Title</title><style>/* id选择器  :id必须保证全局唯一!#id名称{}*/#qinjiang{color: #127fe2;}.style1{color: coral;}h1{color: #ec0909;}</style></head>
    <body><h1 id="qinjiang">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
    <h1>标题5</h1></body>
    </html>
    

优先级:id选择器>类选择器>标签选择器

层次选择器

html网页结构如下:

image

  1. 后代选择器:在某个元素的后面

    /*  后代选择器*/
    body p{background: red;
    }
    
  2. 子选择器,一代,儿子

    /*  子选择器*/
    body>p{background: #127fe2;
    }
    
  3. 相邻兄弟选择器 只针对后一个兄弟

    /*  相邻兄弟选择器:只有一个,只针对后一个兄弟*/.active + p{background: aqua;}<p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>这种情况下,只有p3会变背景色
    
  4. 通用选择器

 /*  通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/.active~p{background: blue;}

结构伪类选择器

/*ul的第一个子元素*/ul li:first-child{background: red;}/*ul的最后一个子元素*/ul li:last-child{background: #127fe2;}
/*定位到p的父元素,选择当前父元素的第一个子元素,并且类型为p*/p:nth-child(1){}
/*定位到p的父元素,选择类型为p的第一个子元素*/p:nth-of-type(1){}

属性选择器(常用)

id + class结合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: blue;text-align: center;text-decoration: none;color: gray;margin-right:5px;font:bold 20px/50px Arial;}/**= 包含这个元素^= 以这个元素开头$= 以这个元素结尾*//*!*存在id属性的元素  a[]{} *!*//*a[id]{*//*  background: yellow;*//*}*//*!*id=first的元素*!*//*a[id=first]{*//*  background: blue;*//*}*//*  class中有links的元素*//*  a[class *= "links"]{*//*    background: yellow;*//*  }*//*  选中href中以http开头的元素*//*  a[href ^= http]{*//*    background: yellow;*//*  }*/a[href $= pdf]{background: yellow;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a>
</p></body>
</html>
http://www.hskmm.com/?act=detail&tid=26598

相关文章:

  • 【光照】Unity[光照烘焙]的原理与具体流程
  • 2025 最新推荐!办公桌厂商权威榜单重磅发布,涵盖老板 / 员工 / 实木 / 屏风办公桌优质之选
  • 2025 办公家具厂家最新推荐榜:实木 / 现代 / 环保 / 智能 / 定制品类精英盘点,5 大优选品牌选购指南
  • 2025机械加工厂家口碑推荐榜:技术实力与行业口碑深度解析
  • 2025通风气楼厂家推荐榜:专业通风与高效节能口碑之选
  • 储罐源头厂家最新推荐榜:技术实力与市场口碑深度解析
  • 2025喷砂设备厂家TOP5推荐:技术实力与行业口碑权威解析
  • 2025电源适配器最新推荐榜:高效稳定与安全性能兼备的优质之
  • 机器学习——放回抽样 - 详解
  • 2025 年废品回收公司最新推荐排行榜权威发布,聚焦桂林废铜/废铁/废铝/电缆电线等回收领域优质公司
  • 搭建doris FE的开发环境
  • 洛谷9695 [GDCPC 2023] Traveling in Cells 题解(线段树+二分)
  • 2025 振动盘厂家最新推荐榜单:涵盖精密 / 电子 / 定制等多场景,揭秘市场信赖品牌选择秘籍笔筒振动盘/振动盘定做/橡胶振动盘厂家推荐
  • 2025 年震动盘厂家最新推荐榜单:覆盖精密震动盘 / 电子震动盘 / 塑料震动盘等品类,为企业高效选型提供权威参考
  • 题解:qoj6170 凸多边形正则划分问题
  • Ynoi
  • 2025 铅板源头厂家最新推荐排行榜:聚焦防辐射铅门 / 放射科防护 / 高纯度铅皮,深挖性价比与适配性
  • 2025 年国内电容厂家最新推荐排行榜:聚焦固态 / 高压 / 安规 / CBB / 超级电容多品类,精选优质厂商助力企业精准采购选型
  • 2025 年 MOS 管厂家最新推荐排行榜权威发布,覆盖高压 / 低压 / 大功率 / N 型等类型,助力企业高效采购精准选型
  • Chrome浏览器插件开发
  • 2025 年最新波形护栏厂家推荐排行榜:聚焦国内优质厂商技术优势与服务能力,助力采购方精准选型 三波/二波/双波/喷塑/公路/热浸锌/浸塑波形护栏厂家推荐
  • linux 中paste命令实现按照指定列数输出文件
  • Transformer原理解析及中文项目实践(微课视频版)
  • ROS 2机器人操作系统与Gazebo机器人仿真
  • 2025 年次氯酸钠发生器厂家最新推荐榜:覆盖电解法 / 食盐电解等类型,聚焦专利技术与成本优势的品牌深度解析水厂/大型/小型/食盐电解产生次氯酸钠发生器厂家推荐
  • 2025 年二氧化氯发生器厂家最新推荐排行榜:电解式设备厂家综合实力测评及优质企业选购指南电解/电解法/电解食盐/电解盐二氧化氯发生器厂家推荐
  • 2025 年章丘二手磁选机服务公司最新推荐榜单:含回收置换 / 全型号设备及优质售后企业权威排行
  • Navicat配置MySQL自动备份
  • 2025 年最新铝镁锰板厂商口碑排行榜:实力厂家推荐及 100 万㎡工程案例与 20 年质保深度解读铝镁锰板屋面板/保温板/卷/墙面板 铝镁锰板金属屋面板
  • 2025 年国内铝板厂家最新推荐排行榜:1-7 系主流铝板企业实力测评及优选指南1060/1100/3003/3004/5052/5083/6061/6063/6082铝板厂家推荐