jjzjj

前端之CSS介绍(层叠样式表)

田家少闲月- 2023-03-28 原文

Cascading Style Sheets(CSS)

1.CSS就是在HTML文档中,如何显示HTML标签,元素,以及他们的样式布局,前端页面的展示形式均由CSS来布局.

2.如何使用CSS

  1. 内部样式表
    1. head标签里<style></style>
    2. 内联样式,在HTML标签里面直接写style
  2. 外部样式表
    1. 内容
    2. 表现---可以直接引入写好的CSS样式文件(.css),提高效率
    3. 存储--存储在CSS文件中
  3. 基本语法
    1. 通过xxx{属性:值},等同于xxx{key:value}
  4. 选择器
    1. 基本选择器
      1. 元素选择器(名称选择器)---标签的名称:h1{key:value}
      2. 属性选择器---id=“属性名称”,一般由#号后面跟属性名称,
      3. 类选择器---class选择器,class关键字,用来描述一类样式的元素---.类名{key:value}
    2. 高级选择器
      1. 分组选择器(组合选择器)---小组1,小组2,小组3...
      2. 通用选择器---*{margin:0;padding:0}
      3. 后代选择器---选择器1 选择器2 选择器3...比如:h1 p{}
      4. 兄弟选择器
      5. 子元素选择器---比如:ul>li{}
      6. 伪类选择器---a:hover{},a:active{}.a:visited{}
  5. CSS注释---/**/
  6. 常见的属性
    1. 宽高
      1. width
      2. hegiht
    2. 颜色
      1. color--值
        1. 颜色名称:red
        2. 颜色进制:#000000
        3. 颜色标识:rgb/rgba
    3. 背景
      1. background-color
      2. background-image
      3. background-repeat
      4. background-postion
    4. 字体
      1. font-size---修改字体大小
      2. font-family---使用哪种字体
      3. font-style:normal
      4. font-weghit:normal bold
    5. 文本
      1. text-align:center,left,right
    6. 链接
      1. a标签:link,active,hover,visited
    7. 列表
      1. 有序列表
        1. list-style:图片,原点,小三角,矩形,星号...
      2. 无序列表
    8. 表格
      1. table---表格
        1. tr
        2. th
          1. background-color
        3. td
          1. text-align
          2. vertical-align
      2. table-collapse
    9. 轮廓
      1. outline
        1. outline-color
        2. outline-style
  7. 盒子模型
    1. 盒模型
    2. 边框
    3. 外边框
    4. 内边框
  8. 定位和浮动
    1. float:涉及元素的排列方式---left,right
    2. position
      1. fixed(固定)
      2. absolute(绝对定位)
      3. relative(相对定位)
  9. DIV标签布局

 

 

有关前端之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. ruby - 如何使用文字标量样式在 YAML 中转储字符串? - 2

    我有一大串格式化数据(例如JSON),我想使用Psychinruby​​同时保留格式转储到YAML。基本上,我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是,当我使用YAML.dump时,它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量?解

  3. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式? - 2

    我正在为一个项目制作一个简单的shell,我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止,我一直在使用CSV::parse_line,将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. 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

  6. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  7. 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

  8. 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:

  9. 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

  10. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中,所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件,并将这些值传递给其他文件,这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用,变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

随机推荐