CSS选择器及一些常用属性的用法

CSS简介

什么是CSS

• CSS全称Cascading Style Sheets （层叠样式表）
• 多个样式可以层层覆盖叠加
• 不同的CSS样式对同一html标签进行修饰，样式有冲突的选用优先级较高的，不同突的共同作用

CSS能做什么

• 美化html网页
• 外部样式表可以提高代码复用性从而提高工作效率
• html内容与样式表现分离，便于后期维护

CSS书写规范

• CSS规则主要由两个主要部分构成：选择器以及一条或者多条声明
• 选择器通常是要改变样式的html元素
• 每条声明由一个属性和一个值组成
• 声明在选择器的内部

基础语法

• 使用方法 ：选择器{属性：值；属性：值；…属性：值}
• 注意事项
  • 使用大括号来包围声明
  • 如果值为若干单词，则要给值加引号
  • 多个声明之间用分号隔开
  • css对大小写不敏感，涉及到与html文件一起使用，class名称与id名称对大小写明敏感

CSS导入方式

内嵌方式（内联方式）

• 把CSS样式嵌入html标签当中，类似属性的用法

内部方式

• 在head标签中使用style标签引入css，

  • <style type="text/css">
     	/*元素选择器的属性*/
        p{color: darkorange}
    	/*id选择器的属性*/
        #id{color: aqua}
    	/*class选择器的属性*/
        .class{color: red}
        /*class在前，id在后 如果显示的是id的属性代表id的优先级高于class*/
        .class1{color: red}
        #id1{color: #888888;font-size: 50px}
        
    </style>
    

• 在body标签正文部分添加元素

  • <!--元素选择器-->
    <p>我爱python</p>
    <!--class选择器-->
    <div class="class">我爱java</div>
    <!--id选择器-->
    <p id="id">css真好用</p>
    <!--判断选择器优先级-->
    <p id="id1"class="class1">html真棒</p>
    

外部方式

• 将css样式抽成一个独立的文件，使用者直接引用

• 引用语句写在head标签内部

  • <link rel="stylesheet" type="text/css" href="css1.css">
    /*rel代表当前页面与href所指定的文档的关系*/
    /*type指的是文件类型，告诉浏览器使用css去解析*/
    /*href指的是css文件的地址*/
    

@import方式

• 在页面引入一个独立的文件

  • <style type="text/css">
    /*导入另一个文件*/
      @import "css1.css";
    </style>
    

• link与@import区别

  • link所有的浏览器都支持，@import某些版本低的ie不支持
  • @import是等待html加载完成才加载
  • @import不支持js动态修改

CSS选择器

基本选择器

• 包括id选择器、class选择器、元素选择器
• 在head中使用style标签引入声明
• 声明
  • id类型选择器声明使用：#id选择器名称{属性：属性值…}
  • class类型选择器声明使用： .class选择器名称{属性：属性值…}
  • 元素类型选择器声明使用： 元素名称{属性：属性值…}
• 此外选择器的优先级为 id选择器>class选择器>元素选择器

属性选择器

• 根据元素的属性及元素的值来选择元素，在head中使用style标签引入在其中声明

• 使用方法

  • 我们在body中定义了多个段落此时想用属性选择器来选择段落增加声明

  • <p id="id1">我爱python</p>
    <p id="id2">我爱html</p>
    

  • <style type="text/css">
       p[id="id1"]{}
       p[id="id2"]{}
    </style>
    

伪元素选择器

• 主要是针对a标签
• 语法
  • 静止状态：a：link{css属性}
    • 不进行任何操作所显示的属性
  • 悬浮状态：a：hover{css属性}
    • 代表鼠标在此区域将要显示的属性
  • 触发状态：a：active{css属性}
    • 指鼠标按下还没有抬起时的状态
  • 完成状态：a：visited{属性}
    • 表示触发完成之后锁显示的属性
  • 返回初始状态需要清除浏览器缓存

层级选择器

• 在body正文中可能标签分为很多层次这时候我们使用选择器可以使用层级选择器

• 用法：父类选择器 子类选择器

  • <div id="d1">
      第一层div
      <div id="d2">第二层div</div>
    </div>
    

  • <style type="text/css">
    #d1{color: blue}/*对第一层div进行操作*/
    #d1 #d2{color: darkorange;}/*只对第二层div进行操作*/
    </style>
    

  • 当我们同时对第一层和第二层进行同一操作的时候两者互不影响。例如同时对第一层与第二层进行颜色的设定

  • 但当第一层设置字体大小而第二层不进行字体大小设置的时候，第二层的字体大小会根据第一层设置而改变

CSS属性

文字属性

属性名	取值	描述
font-size	数值	设置字体大小
font-family	默认、宋体、楷体等	设置字体样式
font-style	normal正常、italic斜体	设置斜体样式
font-weight	100-900数值、bold、bolder	粗体样式

文本属性

属性名	取值	描述
color	十六进制、表示颜色的英文单词	设置文本颜色
text-indent	5px缩进5像素、20%缩进父容器宽度的百分之20	缩进元素中文本的首行
text-decoration	none、under、overline、blink	文本的装饰线
text-align	left、right、center	文本的水平对齐方式
word-spacing	mormal、固定值	单词之间的间隔
line-height	mormal、固定值	设置文本的行高
text-shadow	水平偏移、垂直偏移、模糊值、阴影颜色	设置阴影及模糊效果

背景属性

属性名	取值	描述
background-color	十六进制、表示颜色的英文单词	设置背景颜色
background-image	url（“图片路径”）	设置背景图片
background-repeat	repeat-y、repeat-x、repeat、norepeat	设置背景图的平铺方向
background-size	宽度和高度属性或者只设置宽度	设置图像在背景中的大小

列表属性

属性名	取值	描述
list-style-type	disc	改变列表的标识类型
list-style-image	url（“图片路径”）	用图像表示标识
list-style-position	inside\outside	标识出现在列表项内容之外还是内部

尺寸属性

属性名	取值	描述
width	数值+单位	设置宽度
height	数值+单位	设置高度

显示属性（display属性）

属性值	描述
none	不显示
block	块级显示
inline	行级显示

轮廓属性

属性名	取值	描述
outline-style	soild(实线)、dotted(虚线)、dashed(虚线)	设置轮廓的样式
outline-color	16进制或者用于表示颜色的英文	设置轮廓的颜色
outline-width	是指	设置轮廓的宽度

浮动属性

• 浮动框和普通流是没有相互关系的

• clear属性

• 属性值	描述
  left	在左侧不允许浮动元素
  right	在右侧不允许浮动元素
  both	在左右两侧均不允许浮动元素
  none	默认值允许浮动元素出现在两侧
  inherit	规定应该从父元素继承clear属性的值

定位属性

• 相对定位relative：元素框偏移某个距离，元素仍保持其未定位之前的形状，原本所占据的空间仍然保留
• 绝对定位absolute：元素框从文档流完全删除，并相对于其包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样，元素定位后生成一个块级框；
• 固定定位fixed：元素矿的表现类似于将position设置为absolute,不过其包含块是视窗本身
  • 不会随着滚动条的移动而移动

CSS盒模型

• 内边框 padding
• 边框 border
• 外边框 margin

边框相关属性 border

属性名	取值	描述
border-style	soild实线、double、dashed、dotted	设置边框样式
border-color	16进制或者用于表达颜色的英文	设置边框颜色
boeder-width	数值	设置边框线条粗细

外边框相关属性 margin

属性名	取值	描述
margin	top、right、bottom、left	四个方向的距离
margin-top	数值	上间距
margin-bottom	数值	下间距
margin-left	数值	左间距
margin-right	数值	右间距

内边距相关属性 padding

属性名	取值	描述
padding	top、right、bottom、left	四个方向的距离
padding-top	数值	上间距
padding-bottom	数值	下间距
padding-left	数值	左间距
padding-right	数值	右间距

padding | top、right、bottom、left | 四个方向的距离 |
| padding-top | 数值 | 上间距 |
| padding-bottom | 数值 | 下间距 |
| padding-left | 数值 | 左间距 |
| padding-right | 数值 | 右间距 |