前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性

前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性

一、今日内容

  • CSS的三种引用方式
  • CSS选择器的类型
  • CSS属性

二、CSS的三种引用方式

CSS（Cascading Style Sheet），即层叠样式表，主要用于定义如何显示HTML元素，给HTML设置样式，让它更加美观；

CSS的基本语法为：

image-20201027194841673

同时，CSS的注释语法与HTML也不同：

/*这是一条CSS注释语句*/

那么，如何将CSS和HTML统一起来呢，主要有三种方法实现：

  1. head标签下引用

    <style>
	div{
		background-color: red;
		height: 100px;
		width:100px;
	}
</style>

  2. 操作标签下引用

    <div style="background-color: blue; height: 200px; width: 200px">

  3. 导入外部样式表

    创建CSS样式表文件：

    /*test.css*/
div{
	background-color: green;
	width: 200px;
	height: 200px;
}

    然后再需要导入外部样式表的.html文件内的head标签下引用：

    <link re="stylesheet" href="test.css"

三、CSS选择器的类型

  1. 基本选择器

    • 元素选择器

      div{
	color: green;
}

    • id选择器

      #yesimola{
	color: green;
}

    • 类选择器

      /*选择全部c1类型的标签*/
.c1{
	color: green;
}

/*选择div标签下class为c1的标签*/
div.c1{
	color: green;
}

    • 通用选择器

      /*选择全部标签*/
*{
	color: green;
}

  2. 组合选择器

    • 后代选择器

      /*找到div标签后代里面的所有a标签*/
div a{
	color: red;
}

    • 儿子选择器

      /*选择所有父级是div标签的a标签*/
div>a{
	color: red;
}

    • 毗邻选择器

      /*选择所有紧邻这div标签之后的a标签*/
div+a{
	color: red;
}

    • 弟弟选择器

      /*选择同级的div标签后的所有兄弟标签*/
div~a{
	color: red;
}

  3. 属性选择器

    /*找到所有含有title属性的标签*/
[title]{
    color: red;
}

/*找到含有title属性的div标签*/
div[title]{
    color: red;
}

/*找到含有type属性且属性为text的input标签*/
input[type=text]{
    color: red;
}

  4. 正则选择器

    /*找到所有title属性以hello开头的元素*/
[title^="hello"]{
	color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"]{
    color: red;
}

/*找到所有title属性包含hello的元素*/
[title*="hello"]{
    color: red;
}

/*找到所有title属性中有一个值为hello的元素*/
[title~="hello"]{
    color: red;
}

  5. 分组

    /*div和p标签设置共同的样式*/
div, p{
    color: red;
}

  6. 伪类选择器

    /*选择未访问过的链接a标签*/
a:link{
    color: green;
}

/*选择已访问的链接*/
a:visited{
    color: green;
}

/*鼠标移动到链接上（可应用在其他标签上）*/
a:hover{
    color: green;
}

/*选定的链接（点击未松开的那个瞬间）*/
a:active{
    color: green;
}

/*input输入框获取光标时*/
input:focus{
    background-color: green;
}

  7. 伪元素选择器（通过CSS来造标签，不推荐使用）

    • first-letter

      /*将p标签中文本第一个字改变颜色和大小*/
p:first-letter{
    font-size: 40px;
    color: red;
}

    • before

      /*将p标签中文本前面加上相应内容(CSS语法中，属性值内的字符要用单引号)*/
p:before{
	content: '?';
	color: red;
	font-size: 40px;
}

    • after

      /*将p标签中文本后面加上相应内容*/
p:after{
	content: '!';
	color: red;
	font-size: 40px;
}

  8. CSS的继承

    我们对一个标签限定CSS样式，会直接影响父标签下除a标签外所有子标签的效果；

  9. 选择器的优先级

    设定CSS选择器时，有时会选定多次个别标签，这时不同的CSS选择器的优先级顺序就显得尤为重要。选择器的优先级加权如下：

    选择器类型 优先级加权
    继承 0
    类选择器 10
    元素选择器 11
    id选择器 100
    内联样式 1000
    属性值后加!important INF

    优先级数字越大，越优先展示其效果，优先级相同的，显示后面定义的选择器对应的样式；

四、CSS属性

  1. 高度宽度设置

    • 内敛标签的宽度（width）高度（heigtht）无法设置，只和文字覆盖区域有关；
    • 块级标签的宽度高度可设置；

  2. 字体属性

    • 字体类型（如果选择多个字体属性浏览器会寻找第一个可使用的字体）

      font-family: '楷体', '宋体', '微软雅黑';

    • 字体大小（默认伪16px）

      font-size: 16px;

    • 字体颜色

      字体颜色具有：十六进制、RGB、颜色名、RGBA四种表示方法。

      color: purple;

    • 字重（粗细）

      font-weigth: bold;

      该属性对应的属性值主要包括：

      • normal：default；
      • bold；
      • bolder；
      • lighter；
      • 100-900：400对应normal，700对应bold；
      • inherit：继承父元素字体的粗细值；

  3. 文字属性

    • 文字对齐

      text-align: rigth;

      该属性对应的属性值主要包括：rigth、left、center、justify（两边对齐）;

    • 文字装饰

      text-decoration: none;

      该属性对应的属性值只要包括：none（常用于给超链接a标签去掉下划线）、underline、overline、line-through、inherit等；

    • 首行缩进（英文字符默认占据16px）

      text-indent: 32px;

  4. 背景属性

    • 背景颜色

      background-color: color;

      同文字颜色一样，也可以使用RGB、十六进制、RGBA、颜色名称四种方式表示；

    • 背景图片

      background-image: url("")

      如果设置尺寸超过了图片本身尺寸，会多个图片铺满整个背景区域，如果想要单个背景图片拉伸铺满屏幕，可以添加属性：

      /*关闭平铺*/
background-repeat: no-repeat;
/*将图片尺寸XY轴都缩放至背景的100%*/
background-size: 100% 100%;

      此外，back-ground属性还具有repeat-x和repeat-y等属性值，分别代表横向平铺和纵向平铺；

      另外，我们可能还需要将图片位置设置在浏览器页面中央：

      background-position: center center;

      除center center属性值外，从左上角至右下角，位置属性值依次为：left top\center top\right top\left center\rigth center\left botton等；

      这么多属性也可以统一简写在一个属性内：

      background: url("yeye.jpg") no-repeat left center;

      小例子：利用background-attachment: fixed;让背景图片固定，即使鼠标滚轮上下滑动也保持位置：

      <!--case.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://gitee.com/raigor1/img_folder/raw/master/img/image-20200924165150649.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>
posted @ 2020-10-28 10:32  Raigor  阅读(271)  评论(0)  编辑  收藏  举报