草庐IT

02-CSS基础

OnlyOnYourself-lzw 2023-03-28 原文

CSS 基础

1、CSS介绍

  • CSS概念
    • Cascading Style Sheet层叠样式表，通过不同的样式可以让网页更漂亮，样式也可叠加得到最终的效果。CSS用于渲染html元素进行样式控制的语言
  • CSS作用
    • 网页美化
  • HTML与CSS的区别
    • HTML：网页结构的创建
    • CSS：网页美化

2、CSS三种引入方式

2.1、内联样式

  • 在标签内部使用style属性，属性值是CSS属性键值对（只在一个标签中起作用）
    • <div style="color.gray">Hello CSS~<div>

2.2、内部样式

  • 定义<style>标签， 在标签内部定义CSS样式（只在一个HTML文件中起作用）

    • <style>
  div {
    color: blue;
  }
</style>

2.3、外部样式

  • 定义link标签，引入外部的CSS文件（可以在多个HTML中复用）
    • <link rel="stylesheef" href="out.css">
    • out.css
      • div { color: pink; }
  • PS
    • 在工作中经常会使用外部样式

3、CSS的基本选择器

  • 用于查找指定html元素标签，匹配元素后可以设置样式

3.1、元素选择器

  • 元素名称{color: red;}

    • <style>
    div {color: red;}
</style>

<div>hello css1</div>

3.2、id选择器

  • #id属性值{color: red;}

    • <style>
	#a1 {color: red;}
</style>

<div id="a1">hello css2</div>

3.3、类选择器

  • .class属性值{color: red;}

    • <style>
  	.cls {color: red;}
</style>

<div class="cls">hello css3</div>

4、CSS的扩展选择器

4.1、组合选择器

  • 特点

    • 多个基本选择器组合在一起

    • 名称 符号 作用 格式
      层级选择器 空格 匹配某个选择器下面的子元素或孙元素 父选择器 子孙选择器 ···
      并集选择器 , 匹配多个选择器，元素只要符合其中任意一个选择器即可 选择器1,选择器2,···
      属性选择器 [] 根据指定属性匹配元素 [属性名]

4.2、伪类选择器

  • 名称 符号 作用 格式
    伪类选择器 标签名：link 未访问的状态 a:link
    标签名：visited 已访问的状态 a:visited
    标签名：hover 鼠标悬浮的状态 a:hover
    标签名：active 已选中的状态 a:active

    注意事项

    • 伪类选择器如果以上4中全部设置，顺序必须为link\visited\hover\active，否则效果不显示

5、CSS常见样式

5.1、背景样式

  • 每个标签都可以设置背景

5.2、文本样式和字体样式

6、CSS样式案例（初相遇）

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小说文章</title>
    <style>
      div {
          width: 400px;
          margin: auto;
      }

      p {
          text-indent: 2em;
      }

      #mei {
          color: deeppink;
          font-weight: bolder;
          font-size: 18px;
      }

      #title {
          font-size: 18px;
          color: #06f;
          text-align: center;
      }

      #wen {
        font-size: 12px;
        color: #999;
        font-weight: normal;
      }

      #last {
        font-family: 宋体;
        font-style: italic;
      }
    </style>

</head>
<body>

<div>
  <h1 id="title">
    初次相遇
    <span id="wen">
      文/席慕容
    </span>
  </h1>

  <p>
    <span id="mei">美</span>丽的名和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时候出现
  </p>
  <p>
    我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至 还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。胸怀中 洋溢着幸福，只因你就在我眼前，对我微笑，一如当年
  </p>

  <p id="last">
    我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落英缤纷，好像你我才初相遇
  </p>
</div>
</body>
</html>
CSS02text-alignstylecenterHtml/Css

有关02-CSS基础的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  4. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  5. 软件测试基础 - 2

    Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功

  6. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  7. 牛客网专项练习30天Pytnon篇第02天 - 2

    1.在Python3中，下列关于数学运算结果正确的是:（B）a=10b=3print(a//b)print(a%b)print(a/b)A.3，3，3.3333...B.3，1，3.3333...C.3.3333...，3.3333...，3D.3.3333...，1，3.3333...解析：    在Python中，//表示地板除（向下取整），%表示取余，/表示除（Python2向下取整返回3）2.如下程序Python2会打印多少个数:（D）k=1000whilek>1:    print(k)k=k/2A.1000 B.10C.11D.9解析：    按照题意每次循环K/2，直到K值小于等

  8. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  9. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  10. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

随机推荐