css选择器与常用样式

1. CSS简介

块元素和内联元素
  • 块元素:也叫行级元素,指独占一行的元素。例如:h1~h6,hr,div标签
  • 内联元素:也叫行内元素,内容多大就占多大空间的元素,例如:font,span标签
  • div和span标签的区别:
    • div和span都不会对标签内容做任何修饰,都是配合CSS实现样式修饰和页面布局的
    • span:通常用于文本信息的显示
    • div:通常用于非文本信息的显示
CSS的概念和作用
  • CSS:Cascading Style Sheet,层叠 样式 表
  • 作用:用于修饰页面样式的。
  • 前端开发时:HTML+CSS配合
    • HTML:负责显示的内容。
    • CSS:负责显示的样式

2. CSS引入方式:HTML和CSS建立关系

  • 在HTML里想要使用CSS,可以把CSS写在三种位置引入进来
    • 行内样式
    • 内部样式
    • 外部样式
行内样式/内联样式
  • 把样式写在标签的style属性里
  • 没有复用性
<div style="color:red;font-size:20px;">css样式1div>
内部样式
  • 把样式写在style标签里,style标签放在head标签里
  • 在当前页面里可以复用
<head>
    <meta charset="UTF-8">
    <title>引入方式title>
    
    <style>
        div{
      
            color: blue;
        }
    style>
head>
外部样式
  • 把样式写在单独的css文件里,在页面里使用link标签引入外部的css文件
  • 项目里所有页面都可以复杂,复用性最强
<head>
    <meta charset="UTF-8">
    <title>引入方式title>
    
    <link type="text/css" rel="stylesheet" href="../css/my.css">
head>
  • link标签的属性:
    • type:引入的文件类型,固定值text/css。可以省略不写
    • rel:引入的文件和当前文件的关系,固定值stylesheet。
    • href:引入的文件路径

3. CSS选择器:CSS选中要修饰的元素

  • CSS提供了多种查找标签的方式,常用的有:
    • 基本选择器
    • 扩展选择器
1) 基本选择器
  • 标签选择器:标签名称{...},根据标签名称选择
  • ID选择器:#ID值{...},根据标签的id选择
  • 类选择器:.类名{...},根据标签的class属性选择
/*所有div变红, 标签选择器*/
div{
     
color: red;
}
/*标签为div3变蓝,  ID选择器*/
#div3{
     
color:blue;
}
/*类名为blueclass变蓝, 类选择器*/
.blueClass{
     
color:blue;
}
  • 优先级:
    • ID选择器 > 类选择器 > 标签选择器
    • 如果优先级相同,后加载覆盖先加载
2) 扩展选择器
  • 把基本选择器进行组合,可以更加灵活的使用
    • 选择器 后代选择器{...}:后代选择器
    • 选择器[属性名]{...}:含有指定属性名的元素
    • 选择器[属性名='值']{...}:属性名=指定值的元素
    • 选择器1,选择器2,...{...}:并集选择器
/*
使用空格连接的多个选择器,表示选择后代
id为d1里,类名为c2的元素变成红色,其它不变
*/
#d1 .c2{
     
    color:red;
}

/*
使用属性对选中的元素做进一步过滤
文本框text变成红色;密码框password变成黄色
*/
input[type="text"]{
     
    color:red;
}
input[type="password"]{
     
    color:yellow;
}

/*
使用英文逗号连接的多个选择器,表示这些选中的元素全部都要
所有的h1和span,都变成绿色
*/
h1, span{
     
    color:green;
}

  • 伪类选择器
    • a:link{...}:正常状态的超链接
    • a:visited{...}:被访问过的超链接
    • a:hover{...}:鼠标悬停的超链接
    • a:active{...}:鼠标点下的超链接
/*
超链接 普通状态是黄色,鼠标移入是粉色,鼠标按下是紫色,访问之后是绿色
*/
a:link{
     
   color:yellow;
}
a:visited{
     
   color: green;
}
a:hover{
     
   color:pink;
}
a:active{
     
   color: purple;
}

4. CSS常用样式

修饰文本的样式
  • 修饰文本的样式
样式名 作用 取值
color 设置文本颜色 red
#00ff00
rgb(0,0,255)
line-height 设置文本行高 70%
text-decoration 设置文本上的线条 underline:下划线;
overline:上划线;
line-through:删除线
none:没有线条
text-indent 设置首行缩进 像素px
2em
text-align 设置文本的水平位置 left:靠左
center:居中
right:靠右
  • 修饰文字的样式
样式名 作用 取值
font-family 设置字体 sans-serif
font-size 设置文字大小 50px
2em
60%
font-style 设置文字样式 italic:斜体, normal:普通字体
font-weight 设置文字加粗 bold:加粗
修饰背景的样式
样式名 作用 取值
background-color 设置背景颜色 与文本颜色相同
background-image 设置背景图片 url(“图片路径”)
background-repeat 设置平铺方式 no-repeat:不重复
repreat-x:横向重复
repeat-y:纵向重复
repeat:都重复
background-position 设置背景图片位置 left ,top

你可能感兴趣的:(css)