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-width: 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-width: 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>

posted on 2018-01-28 16:22  蒋乐兴的技术随笔  阅读(266)  评论(0)  编辑  收藏  举报

导航