css基础（1）

css(外观)

css初识

css（Cascading Style Sheets）通常称层叠样式表或css样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图形的外形（宽高、边框样式。边距等）以及版面的布局等外观显示样式。

css的样式规则

h1 { color : red; font-size:16px;} 选择器 {属性：属性值；}
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

css的使用

1. 在标签里面例如 行内样式
2. 在head里面 内部样式表
3. 新建一个css文件外部引入需要在 引入 外部样式表
   他们的优先级是3<2<1

css字体样式表

font-size：字号大小

font-family：字体
p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意：

• 现在网页中普遍使用14px+。
• 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
• 各种字体之间必须使用英文状态下的逗号隔开。
• 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
• 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
• 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
  font-weight:字体粗细
  字体加粗除了b和strong标签之外，可以用css来实现，但是css是没有语义的。
  font-weight的属性值有normal，bold,bolder,lighter,100-900(100的整数倍)。
  font-style：字体风格
  字体倾斜除了用i和em 标签之外可以用font-style来实现。
  属性值normal(正常)，italic（斜体），oblique（倾斜）
  可以用font设置全部属性
  font：font-style font-weight font-size/line-height font-family
  使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

开发者工具（Chrome）

以后代码出问题，第一件事就是打开开发者工具
按F12 或者是ctrl+shift+i 或者点击空白处选择 检查

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

• 标签选择器 规则 标签名{属性：属性值；}或者 元素名{属性：属性值；}

• 类选择器 规则 .类名{属性：属性值；} 要在元素标签上面加class属性例如
  注意：1.class可以有多个2.不建议使用_下划线命名3.不要以纯数字、中文等命名

• id选择器 规则 #类名{属性：属性值；} 例如 id只有一个

• 通配符选择器 规则 *{属性：属性值；} 用 * 标签是作用范围最广的一般

*{
margin:0; /*清除外边距*/
padding:0;/*清除内边距*/
}

• 伪类选择器

1. 链接伪类选择器
   a :link 未访问的链接
   a :visited 已访问的链接
   a :hover 鼠标移动到的链接
   a :active 选定的链接
   记忆 love hate

    
    
    
    



    点击
    点击我

2. 结构伪类选择器（css3）
   :first-child:选取属于其父元素的首个子元素的指定选择器
   :last-child:选取属于其父元素的最后一个子元素的指定选择器
   :nth-child(n):匹配属于其父元素的第N个子元素，不论元素类型
   : nth-last-child(n):选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
   n 可以是数字、关键词或公式

    
    
    
    



    

        
aa
            

                
星期一
                
星期一
            
            星期一
            星期一
        
        

            星期二
        
        

            星期三
        
        

            星期四
            星期四
            星期四
            星期四
        
    

3.目标伪类
:target目标伪类选择器，选择器可用于选取当前活动的目标元素
:target{
font-size:18px;
color:red;
}

    
    
    
    



    

        

            

                

                    
星期一
                    
星期二
                    
星期三
                
            
        
    
    

        
1
        
2
        
3
    

根据锚点做的点击换图片

    
    
    
    



    

        

        

        

        

        

        

        

    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7