七环第一帅
七环第一帅

css语法部分

前言: 看了几天HTML标签和CSS布局,我狭义的认为他们就是iOS里面的视图控件了.而且布局相对于iOS要简单一点,虽然我大iOS有AutoLayout,但是UIScrollView之类的控件写起来还是要相对复杂一点的.各有利弊,以后再边学边比较吧.(以上纯属个人看法)

  • 1 css注释代码

    /*注释部分*/

  • 2 内联式css样式,直接写在现有的HTML标签中
    从css样式代码插入的形式来看基本可以分为3种: 内联式,嵌入式和外部式三种.
    内联式: css样式表就是把css代码直接写在现有的HTML标签中.

        
    这里是蓝色

    如果有多条css样式代码设置,可以写在一起,中间分好隔开.

    
这里是文字

  • 2 嵌入式css样式,写在当前的文件中

  • 3 外部式css样式,写在一个单独的文件中
    也称外联式,把css代码写在一个单独外部文件中,这个css样式文件以".css"为扩展名.在内(而不是在< style>标签内) 使用标签将css样式文件链接到HTML文件内,代码如下:

  • 4 三种样式的优先级
    内联式 > 嵌入式 > 外部式
    但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面.


嵌入式css样式




慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！




#shijian{
color:blue;
font-size:30px;
}
结论: 此时"实践体验"字体是蓝色的,因为嵌入式css样式的位置在外部式的前面了.
```

  • 5 类选择器
    语法: .类选择器名称{css样式代码;

    1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）
使用:
胆小如鼠
胆小如鼠
/*设置类选择器css样式,类前面要加一个英文圆点*/
.stress{
    color:red;
}

  • 6 ID选择器
    为标签设置id = "ID名称"
    ID选择符的前面是"#"

    


    
    勇气
    
    
    三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
    
    
    到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

  • 6 类和ID选择器的区别

    1. ID选择器只能在文档中使用一次.ID在一个HTML文档中,ID选择器只能使用一次,而且仅一次.而类选择器可以使用多次.
2. 可以使用类选择器词列表方法为一个元素同时设置多个样式.
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

    到了三年级下学期时

  • 7 子选择器

    用大于符号(>),用于选择指定标签元素的第一代子元素.
.food > li {borde:1px solid red;}
代码如下:



子选择符



三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。


食物



  • 水果

    • 香蕉

    • 苹果

    • 梨



  • 蔬菜

    • 白菜

    • 油菜

    • 卷心菜






效果图时这样的:
```

14954364402366.jpg 
```
子选择器我开始没看懂,但是看到评论区有个人分析,才恍然大悟,>这个“选择指定标签元素的第一代子元素”就是让样式只作用于它的孩子，不作用与他的孙子。注意看这段代码:

我还是一个胆小如鼠的小女孩

看清了外面的span是p标签的亲儿子,而里面的span是p标签的孙子,所有,子选择器选择的是外面的span标签,所以是外面的span元素有红色边框...(说实话,技术课程搞那么多虚的概念不如大白话来的明白!)
```

  • 8 包含(后代)选择器,加入空格,用于选择指定标签元素下的后辈元素.

    .first span{color: red;}

与子选择器的区别: 子选择器仅是指它的直接后代,而后代选择器作用与所有后代子元素.

```HTML



后代选择器



 
三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。



    
    
  • 水果
        
      
            
    • 香蕉
      • 
            
    • 苹果
      • 
            
    • 梨
      • 
        
    
    
    • 
    
  • 蔬菜
        
      
            
    • 白菜
      • 
            
    • 油菜
      • 
            
    • 卷心菜
      • 
        
    
    
    • 



代码运行结果:
```
css语法部分_第1张图片
14954371747130.jpg

注意: 慕课给出的例子还是不太容易理解,我对代码稍稍做了修改,更能轻易的对比出包含选择器和子选择器的区.

  • 9 通用选择器
    使用一个(*)指定,作用是匹配html中所有标签元素

    {color:red;}

  • 10 伪类选择符
    它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

    a:hover{color:red;}

意思就是为a标签划过的状态设置字体颜色变红.目前为止,可以兼容所有浏览器的"伪类选择符"就是a标签上使用 :hover了,比较常用的还是 a:hover 的组合

  • 11 分组选择器
    当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符;

    h1,span{color:red;}
/*相当于*/
h1{color:red;}
span{color:red;}

示例:

```HTML



分组选择符



    
勇气

    
三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。

    
到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。

    ![](http://upload-images.jianshu.io/upload_images/1526313-760d0a2982c0befd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


```

  • 12 继承
    cs的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码: 某种颜色应用于p标签,这里子元素为span标签.

    p{color:red;}

    三年级时,我还是一个胆小如鼠的小女孩.

span中的文本也被设置成了红色.但有一些css样式是不具有继承性的.比如 border:1px solid red;

  • 13 特殊性
    有时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一个css样式呢?

    p{color:red;}
.first{color:green;}

    三年级时,我还是一个胆小如鼠的小女孩
    
/*会显示绿色,浏览器会按照权值来判断使用哪种css样式,哪种权值高的就使用哪种css样式*/

权值的规则:
标签权值为1,类选择符的权值为10,ID选择符的权值最高为100.继承也有权值,但是最低(0.1)

  • 14 层叠
    一个元素有多个css样式,当有相同权重的样式存在时,会根据这些css样式的前后顺序来解决,处于最后面的css样式会被应用.

    p{color:red;}
p{color:green;}

    三年级时，我还是一个胆小如鼠的小女孩。
    
/*最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。*/
```

  • 15 手动设置最高权值
    使用!important手动设置某些样式的最高权值

    p{color:red !important;}
p{color:green;}

     三年级时,我还是一个胆小如鼠的小女孩.
/*p段落中的文本会显示红色,尽管红色设置在绿色前面*/

注意: !important要写在分号的前面,即使是下面的代码(类选择器的权值高于标签),p段落的文本也会显示红色哦~

```HTML
p{color: red !important;}
.first{color: green}

 三年级时,我还是一个胆小如鼠的小女孩.
```

  • 16 文字排版 -- 字体
    为网页的文字设置字体为宋体,代码:

    body{font-family: "宋体";}

注意: 不要设置不常用的字体,因为如果用户本地电脑上没有安装你设置的字体,就会显示浏览器的默认字体.一般的网页喜欢设置"微软雅黑":

```CSS
body{font-family: "Microsoft Yahei";} 
/*or*/
body{font-family: "微软雅黑";}
/*第一种比第二种兼容性更好一些*/
```