css的组成部分：选择器和声明

  1. css的注释：
  2.     /*这是注释*/
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--<style>-->
  7.         <!--p {color:green}-->
  8.     <!--</style>-->
  9.     在head里面添加style标签
  10.     <link rel="stylesheet" href="scc.css">
  11.     创建一个stylesheet文本，在文本中写css样式，然后在head链接，href是文本名字
  12. </head>
  13. <body>
  14.  
  15. <!--<p style="color:red">Hello World!</p>-->
  16. 在标签里边直接添加style，不建议
  17. <p>Hello World!</p>
  18.  
  19. </body>
  20. </html>
  21.  
  22. css存在的位置

css存在的位置

css选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #p1 {color:red}   /*id是p1的标签#==id*/
  8.         #p2 {color:darkgreen}   /*id是p2的标签*/
  9.         div {color: blue;}   /*所有的div标签*/
  10.         .c1 {color:yellow}  /*class为c1的标签.==class*/
  11.         i.c1 {color:orangered}   /*i标签中class为c1的标签*/
  12.         * {color:purple}   /*通用*/
  13.     </style>
  14. </head>
  15. <body>
  16. <p class="c1">p标签在此</p>
  17. <p>p标签在此</p>
  18. <p id="p1">p标签在此</p>
  19. <p>p标签在此</p>
  20. <p id="p2">p标签在此</p>
  21. <p>p标签在此</p>
  22.  
  23. <div>我是单行的啊</div>
  24. <div>我是单行的啊</div>
  25. <div>我是单行的啊</div>
  26. <hr>
  27. <span>我只在一行</span>
  28. <span class="c1">我只在一行</span>
  29. <p class="c1 c2 c3 c4">p标签</p>
  30. <i class="c1">倾斜一下</i>
  31.  
  32. </body>
  33. </html>
  34.  
  35. 基本选择器

基本选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         li>a {color:red}   /*找儿子标签，li里面的a*/
  8.         #d1 p {color:green}   /*在id=d1中找到所有的p，子子孙孙的找*/
  9.         div+p {color:blue}   /*毗邻寻找，找下面的第一个*/
  10.         #d2~a {color:yellow}   /*弟弟选择器，id=d2所有的a标签*/
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15. <ul>
  16.     <li><a href="">11111</a></li>
  17.     <li><a href="">22222</a></li>
  18.     <li><a href="">33333</a></li>
  19. </ul>
  20.  
  21. <ol>
  22.     <li><p><a href="">哈哈</a></p></li>
  23. </ol>
  24.  
  25. <div id="d1">
  26.     <div>
  27.         <div>
  28.             <p>ppppp</p>
  29.         </div>
  30.         <p>pppppp</p>
  31.     </div>
  32.     <p>儿子标签</p>
  33. </div>
  34.  
  35. <p>div上面的p标签</p>
  36. <div>我是div</div>
  37. <p>div下面的p标签</p>
  38. <p>下下面</p>
  39.  
  40. <div id="d2">d222</div>
  41. <p>d2下面的</p>
  42. <a href="">呵呵</a>
  43. <p>呵呵你一脸</p>
  44.  
  45. </body>
  46. </html>

组合选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div[pg] {color: red}   /*找到所有有pg属性的标签*/
  8.         div[pg='hh2'] {color:green}   /*找到pg属性值是hh2的标签*/
  9.         div[title*='hello'] {color:yellow}  /*所有字符串里有hello的值*/
  10.         div[title~='hello'] {color:blue}   /*所有属性值被空格分割得到的列表中是否有hello*/
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15. <div pg="hh">野猪佩奇</div>
  16. <div pg="hh2">野猪佩奇</div>
  17. <div>野猪佩奇身上纹</div>
  18.  
  19. <div title="helloworld">helloworld</div>
  20. <div title="hello world">hello world</div>
  21.  
  22. </body>
  23. </html>

属性选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         <!--#d1 {color: red}-->
  8.         <!--.p1 {color: red}-->   和下面这一句相等，可以合在一起
  9.         #d1, .p1 {color:red}
  10.     </style>
  11. </head>
  12. <body>
  13.  
  14. <div id="d1">divvvv</div>
  15. <p class="p1">pppp</p>
  16. <p>我也是p</p>
  17.  
  18. </body>
  19. </html>

分组和嵌套

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         a:link {color:red}   /*没有访问的，访问过后就会变成visited*/
  8.         a:visited {color:green}   /*已经访问的链接*/
  9.         a:active {color:purple}   /*鼠标点上去的时候*/
  10.         span:hover {color: blue}   /*鼠标悬浮上去之后显示*/
  11.         input:focus {background-color: yellow}   /*input输入框点进去要输入时改变*/
  12.     </style>
  13. </head>
  14. <body>
  15.  
  16. <a href="https://www.baidu.com">访问过得</a>
  17. <a href="https://NBA.com">没有访问</a>
  18.  
  19. <span>我是span标签</span>
  20.  
  21. <label>
  22.     <input type="text">
  23. </label>
  24.  
  25. </body>
  26. </html>

伪类选择器—有意思

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div.c1:first-letter {color:red;font-size:48px}
  8.         /*div标签中class为c1的第一个字*/
  9.         p:before {content:'小学僧';color:blue}
  10.         /*在p标签内容的前面加上*/
  11.         p:after {content:'[!]';color: green}
  12.         /*在p标签内容的后边加上*/
  13.     </style>
  14. </head>
  15. <body>
  16.  
  17. <div class="c1">我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</div>
  18.  
  19. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  20. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  21. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  22. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  23. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  24. <p>我蒙上自己的双眼,只想记住最后看你的那一眼。我刺瞎自己的双眼只为记住那逝去的红颜。</p>
  25.  
  26. </body>
  27. </html>

伪元素选择器

css选择器的优先级

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #p1 {color:orange}
  8.         /* 100 */
  9.         .c1>.c2 {color:yellow}
  10.         /* 多一个类多10，但是不会翻身 20 */
  11.         .c2 {color: green}
  12.         /* 10 */
  13.         p {color: blue}
  14.         /* 1 */
  15.         /*p {color: blue !important}*/
  16.         /* 加上!important则为不讲道理的显示 */
  17.     </style>
  18. </head>
  19. <body>
  20.  
  21. <div class="c1" >
  22.     <p class="c2" id="p1" >c1内部的p标签</p>
  23.     <!--<p class="c2" id="p1" style="color:red">c1内部的p标签</p>-->
  24.     <!--直接在标签内部指定的优先级为1000-->
  25. </div>
  26.  
  27. </body>
  28. </html>

选择器优先级

  1. css属性相关
  2. 宽和高：width属性可以为元素设置宽度。
  3.             height属性可以为元素设置高度。
  4.     块级标签才能设置宽度，内联标签的宽度由内容来决定。
  5. 字体属性
  6. 文字字体：font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
  7. 字体大小：如果设置成inherit表示继承父元素的字体大小值
  8. 字重（粗细）：font-weight用来设置字体的字重（粗细）。
  9.     normal——默认值，标准粗细
  10.     bold——粗体
  11.     bolder——更粗
  12.     lighter——更细
  13.     100~900——设置具体粗细，400等同于normal，而700等同于bold
  14.     inherit——继承父元素字体的粗细值
  15. 文本颜色
  16. 颜色属性被用来设置文字的颜色。
  17. 颜色是通过CSS最经常的指定：
  18.         十六进制值 - 如: ＃FF0000
  19.         一个RGB值 - 如: RGB(255,0,0)
  20.         颜色的名称 - 如:  red
  21. 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
  22. 文字属性
  23. 文字对齐方式：text-align 属性规定元素中的文本的水平对齐方式。
  24.            left——左边对齐 默认值
  25.            right——右对齐
  26.            center——居中对齐
  27.            justify——两端对齐
  28. 文字装饰：text-decoration 属性用来给文字添加特殊效果
  29.     none——默认。定义标准的文本。
  30.     underline——定义文本下的一条线。
  31.     overline——定义文本上的一条线。
  32.     line-through——定义穿过文本下的一条线。
  33.     inherit——继承父元素的text-decoration属性的值。
  34. 常用的为去掉a标签默认的自划线：a {text-decoration: none;}
  35. 首行缩进：将段落的第一行缩进 32像素p {text-indent: 32px;}
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
  8.         span {font-size: 48px}
  9.         div {font-weight: bold;color:rgb(251,97,19);text-align: center}
  10.         /*字体宽度，颜色，中间对齐*/
  11.         p {font-size: 14px;text-decoration: overline;text-indent: 28px}
  12.         a {text-decoration: none}
  13.         a:hover {text-decoration: underline}
  14.     </style>
  15. </head>
  16. <body>
  17.  
  18. <div>div</div>
  19.  
  20. <span>sssssssssss</span>
  21.  
  22. <p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p>
  23.  
  24. <a href="">超链接</a>
  25.  
  26. </body>
  27. </html>

css属性相关

css样式之标签的查找的更多相关文章

  1. html基础：css样式1

    h't'm'l中用到css样式有三种方式: 1.在header中增加style标签,在style标签中写 2.用link标签引用css样式文件 3.在需要使用css样式的标签添加style属性 一.在 ...

  2. css样式的继承性、层叠性 、优先级

    一.css样式的继承性: 作用:给父元素设置一些属性,子元素也可以使用 应用场景: 一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容.优化代码,降低工作量 注意点: 1.并不 ...

  3. Visualforce Page CSS样式

    Salesforce Page开发者文档:https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_stylin ...

  4. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  5. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  6. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  7. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  8. 内联式css样式，直接写在现有的HTML标签中

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...

  9. Bootstrap入门（三）<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

随机推荐

  1. SQL Server横向扩展：设计，实现与维护（2）- 分布式分区视图

    为了使得朋友们对分布式分区视图有个概念,也为了方便后面的内容展开,我们先看看下面一个图:     讲述分布式分区视图之前,很有必要将之与我们常常熟悉的分区表和索引进行区别. 首先,分布式分区视图是一个 ...

  2. line1: 1: Syntax error: word unexpected (expecting ")")

    行时错误:line1: 1: Syntax error: word unexpected (expecting ")") 查看Makefile编译规则,可能由于依赖关系造成编译器使 ...

  3. [C++] Pure Virtual Function and Abstract Class

    Pure Virtual Function Abstract Class

  4. [C++ Mind Map] class and memory

    class and memory

  5. p4042 [AHOI2014/JSOI2014]骑士游戏

    传送门 分析 我们发现对于一个怪物要不然用魔法代价使其无需考虑后续点要么用普通攻击使其转移到他所连的所有点上且所有边大于0 所以我们可以先将一个点的最优代价设为魔法攻击的代价 之后我们倒着跑spfa求 ...

  6. N-Gram的数据结构

    ARPA的n-gram语法如下: [html] view plaincopyprint? \data\ ngram 1=64000 ngram 2=522530 ngram 3=173445 \1-g ...

  7. 在windows上编译wireshark源代码

    终于在windows上成功编译了wireshark源代码,个中酸辛,都是泪..只能说要多试! windows上编译wireshark共用到三个东西:wireshark源代码.python.cygwin ...

  8. beecloud resrful api test(nodejs)

    直接上代码 /** * Created by wyh on 2015/10/8. * 参数说明:https://beecloud.cn/doc/ */ var https = require('htt ...

  9. 我的BootStrap学习笔记

    1.全局样式里面: 1.container:版心 2.col-xx-xx:栅格布局 3.btn btn-default: 按钮,默认按钮样式 4..pull-left  pull-right  cle ...

  10. 【图解HTTP】第一章 了解web及网络基础

    [图解HTTP]了解Web及网络基础 Web页面是如何呈现的?根据Web浏览器地址栏中指定的URL,Web浏览器从Web服务器端获取文件资源(resource)等信息,从而显示出Web页面. 这种通过 ...