zoukankan      html  css  js  c++  java

  • css总结

     

    怎么看待CSS

    CSS 是一种选择HTML元素、然后设定选定HTML元素CSS属性的机制； CSS选择符和样式构成了一条CSS规则。

    CSS规则

    规则是一条完整的CSS指令，规则说明了要修改的元素，和元素上要应用的样式

    为文档增加样式的三种方法

    1. 行内样式

      就是写在标签style属性中的样式

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf8"/>
</head>
<body>
    <p style="color:red">这就是就行内样式的写法</p>
</body>
</htmL>

    2. 嵌入样式

      嵌入样式是放在head中的

       <!DOCTYPE html>
 <html>

     <head>
         <meta charset="utf8" />
         <style>
             p { color: blue}
         </style>
     </head>

     <body>
         <p>这就是就嵌入样式的写法</p>
     </body>
 </htmL>

    3. 链接样式

      链接样式是通过link标签引入的样式

      <link href="./css/css1.css" rel="sytlesheet" type="text/css" />

    样式文件中的相互引用

    在一个样式文件中可以引用另一个样式文件，这个功能要通过@import指令来完成

    @import url(css/other.css)

p {color:red}
.....

    这种用法下@import一定要出现在其它样式的定义之前

    css规则命名惯例

    p {color:red;}

    css规则由两部份组成选择符，声明；声明又由两个部分组成一个是 属性，另一个是值。声明包含在一对花括号内，每一个声明都以;结尾。

    1. 多个选择符共用同一声明

      h1 {color:red;}
h2 {color:red;}
h3 {color:red;}

      对于这种重复的劳动css中是有简写的

      h1,h2,h3 {color:red;}

      一定要注意多个选择符之间是有,分隔的。

    2. 多条规则应用于同一个选择符

      如果还想给上面的h3加一个粗体，那么可以这样写

      h1,h2,h3 { color:red;}
h3 { font-wight:bold;}

    上下文件选择器

    如果想给article 和 aside中的段落分别设置不同的字号；

    方法一：通过inline行内样式来设置这个明显太low了

    方法二：通过上下文件选择器

    1. 上下文件选择器的格式

      标签1 标签2 {声明}

      其中标签2就是我们要选择的目标，而且只有在标签1是 它祖先元素的情况下对会被选中

      上下文件选择器中各个标签以空格分隔

    2. 例子

      article p {font-weight:bold;}

      注意上下文选择器并不要求、article 是 p 直接祖先，不管中间隔着多少层都是没有问题的

    特殊的上下文件选择器

    由上面的内容可以知道只有目标元素上层存在对应的祖先元素就行， 这种粒度还是太大了。

    1. 直接祖先 > 目标元素

      子选择 
      article > p {color: blue;}

      也就是说只有article是p的直接祖先的情况下p才会为被设置css属性

    1. 同胞元素 + 同胞元素

      紧邻同胞选择

      h2 + p {color:red;}

      只有h2 后面紧接着的p会被相应属性、并不是所有的p同胞都会被设置

    2. 同胞元素 ~ 同胞元素

      一般同胞选择

      h2 ~ p {color:red;}

      只要h2在p前面、那么p就会设置上对应的属性

    通用选择符

    * 号表示能用选择符、它可以配置任何元素

    1. 通用选择符用法1

      * {color:red;}

      把所有的元素的color属性设置为red

    2. 通用选择符用法2

      section * {color:red;}

      所section元素下的所有元素的color设置为red

    3. 通用选择符用法3

      section * em {color:red;}

      这名规则的目标是 em 元素，他要位于section 下的所有子元素内

    ID和类选择器

    ID和类为我们选择元素提供了另类手段，利用它可以不用考虑文档的层次 结构；只要在html标记中为元素增加id、class属性

    1. 类属性

      类属性是html元素中的class属性、body中的任何一个元素都可以增加

    2. 类选择器的定义

      .class_name {....;}

      注意.号之后直接跟类名不能有空格

       <style>
   .specialtext {
     color: red;
     border- 4
   }
 </style>
 .....
<p>this is p1 </p>
<p class="specialtext">this is p2 </p>

    3. 带标签的选择器

      标签.类名 {...;}

p.specialtext {color:red;}

       <style>
   p.specialtext {
     color: red;
     border- 4
   }
 </style>
 .....
 <span class="specialtext">this is span </span>
 <p class="specialtext">this is p </p>

      p 元素而且要带有specialtext类才会被选中

      这样做的目的是为了更加精确的选择标签

    4. ID属性

      id属性作为元素的唯一标识、同一个id在页面中只能出现一次

    5. ID选择器的定义

       <style>
  #id_name {xxx;}
 </style>

      与class的定义一样，只不过id选择器定义时用的是#号

    6. 带标签ID选择器

       <style>
     p#boy {
         color: blue
     }
 </style> 
 
 ... ...
 <p id="boy">this is p</p>

      只有id属性为boy并且是p标签的元素才会设置上相应属性

    7. 用于导航的id选择器

      id也可以用在页内导航中

      <a href="#boy" >导航到boy元素</a>

      如果一a的href设置成了 # 号、那么它会返回到页面的顶部

    属性选择器

    基于html元素的属性进行元素选择

    1. 第一种形式

      标签名[属性名] { ...;}

      <style>
     p[title] {color:red;}
</style>
....

<p title="main"></p>

      属性选择器第一步是定义特定的标签

      属性选择器第二步是标签有设置有特定的属性，至于属性的值 是什么是无关紧要的

    2. 第二种形式

      标签名[属性名="属性值"] 第二种形式相比第一种要更加的严格，它要值属性值也等于特定值

    伪类

    1. 伪类的分类

      1. UI伪类

        会在html元素处于某个状态时为该元素应用CSS样式

      2. 结构化伪类

        元素存在某种结构化的上下文关系时应用CSS样式

    2. UI伪类

      最常见的UI伪类应用场景是链接(a 元素)利用UI伪类，可以为连接赋于不 同的样式；

      1. 链接伪类

        link : 这个时候链接正在等待用户点击

        Visited : 用户点击过这个链接

        Hover : 鼠标悬停在链接上

        Active : 链接正在被点击

        例子：

        a:link {color:red;}
a:visited {color: black;}

        : 表示我们定义的是一个伪类选择器

      2. UI伪类可以用于任何元素

        如当鼠标放在p元素上时把文本设置为蓝色

         p:hover {color: blue;}

      3. focus 伪类

        当input得到焦点时，调整input的边框

         input: focus {border:1px; solid:blue;}

        bootstrap中大概就是这个效果

      4. target 伪类

        这个可以用于同一个页面下的导航

         <a href="#sp_text"></a>
 
 
 ....
 
 <h1 id="sp_text"> this is sp text <h1>

        通过上面的代码我们可以通过超链接导航到sp_text、然而有时候 由于页面的内容过多，所以sp_text看起来可能并不起眼，也就是说 我们还是比较困难找到它在页面的哪个位置

        为了解决这个问题我就可以使用target伪类、当我们以页面导航 的方式定义到sp_text元素时、它就可以表现出这一情况下才有的 特定CSS属性

         #sp_text:target {background: eee;color:red;}

         ....
 <a href="#sp_text">go to sp_text</a>
 
 ....
 
 <h1 id="sp_text">this is sp text </h1>

    3. 结构化伪类

      结构化伪类可以根据标记的结构应用样式

      1. first_child ,last_child

        first_child 代表一组同胞中的第一个元素 last_child 代表一组同胞中的最后一个元素

        把一组span中第一个的color设置为red

         <style>
   span:first-child {color:red;}
 </style>  
 
 ... 
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

      2. nth-child(x)

        nth-child(x) 代表一组同胞中的第x个元素

        把一组span中第2个的color设置为red

         <style>
   span:nth-child(2) {color:red;}
 </style>
 
 ...
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

    伪元素

    有时候我们想选中的东西并不是元素、比较我们想让每一段文字的首字母放大300%；这种选择的粒度不是选中任何 一个元素可以解决的; 面对这种选择粒度我就要用到伪元素了。

    1. first-letter

      把段落(p)中的首字母放大300%

       p::first-letter {font-size: 300%;}
 
 <p>I well big ...</p>

    2. first-line

      选中段落的第一行

    3. before & after

       p.age::before {content: "age: "}
 p.age::after {content: " years."}
 
 <p class="age">25</p>
  • 相关阅读:
    Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息，没有进度条和Logo，或者只有紫色界面，或者没有开机画面等问题解决
    Ubuntu 16.04设置开机关机时显示命令详细信息不显示进度条Logo
    Ubuntu中LightDM是什么（转）
    Linux终止进程的工具kill/killall/pkill/xkill/skill用法区别（转）
    Ubuntu 16.04安装BleachBit清理系统垃圾文件
    Ubuntu 16.04禁用来宾账号（Guest User）
    Java反射 : Declared的作用 ( 例如 : getMethods和getDeclaredMethods )
    java isAssignableFrom instanceof 小结 专题
    java.lang.IllegalArgumentException: Illegal character in query at index ...解决办法
    spring boot使用AbstractXlsView导出excel
  • 原文地址：https://www.cnblogs.com/JiangLe/p/8371413.html
Copyright © 2011-2022 走看看