前端之CSS

1. CSS介绍

​ CSS (Cascading Style Sheet，层叠样式表)定义如何显示html元素

​ 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染)。

2.CSS语法

2.1 CSS实例

​ 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。img

2.2 CSS注释

/*单行注释*/
/*
多行注释
*/

3.CSS的三种引入方式

3.1 head内style标签内部直接书写CSS代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {color: red}
    </style>
</head>

3.2 link标签引入外部CSS文件

<link rel="stylesheet" href="mycss.css">

3.3 直接在标签内通过style属性书写CSS样式

<p style="color:deeppink">我是一个P标签</p>

ps：注意：页面CSS样式通常都应该写在单独的CSS文件中

4. CSS选择器

4.1 基本选择器

  • 标签选择器

p {color: "red";}  /*所有P标签字体颜色都为红*/

  • id选择器

/*所有id为i1的标签，背景颜色为红色*/
#i1 {
    background-color: red;
}

  • 类选择器

/*类名为c1的标签*/
.c1 {
    font-size: 14px;
}
/*类名是C1且标签是P的*/
p.c1 {
    color: red;
}

注意：

样式类名不要用数字开头(有的浏览器不认)

标签中的class属性如果有多个，要用空格分隔

  • 通用选择器

/*所有标签*/
* {
    color: white;
}

4.2 组合选择器

  • 后代选择器

    /*li内部的a标签设置字体颜色*/
li a {
    color: green;
}

  • 儿子选择器

    /*选择所有父级是<div> 元素的 <p> 元素*/
div>p {
    font-family:"Arial Black", arial-black, cursive;
}

  • 毗邻选择器

    /*选择所有紧接着<div>元素之后的<p>元素 对下不对上*/
div+p {
    margin: 5px;
}

  • 弟弟选择器

    /*div后面所有的兄弟p标签 对下不对上*/
div~p {
    color: deeppink;
}

4.3 属性选择器

/*只要有xxx属性名的标签都找到*/
[xxx] {
    color: red;
}

/*只要有属性名为xxx并且值为1的标签都能找到*/
[xxx='1'] {
    color: blue;
}

/*有属性名为xxx并且值为2的p标签*/
p[xxx='2'] {
    color: green;
}

4.4 分组和嵌套

  • 分组

    当多个元素的样式相同的时候，我们没必要重复地为每个元素都设置样式，可以通过在多个选择器间用逗号分隔的分组选择器统一设置元素样式

    /*将div,p,span标签中的字体统一设置为红色*/
div,p,span {
    color: blue;
}
/*通常分组选择器分两行写，更清晰*/
div,
p,
span {
    color: blue;
}

  • 嵌套

    不同的选择器可以共用一个样式

    /*后代选择器与标签组合使用*/
div p，span {
    color: red;
}
/*将div内部的p标签和所有span标签字体设置为红色*/

4.5 伪类选择器

/*多用于a标签*/
/* 未访问的链接*/
a:link {
    color: red;
}
/*鼠标移动到连接上*/
a:hover {
    color: yellow;
}
/*选定的链接*/
a:active {
    color: black;
}
/*已访问的链接*/
a:visited {
    cololr:green;
}
/*input文本输入框获取焦点时的样式*/
input:focus {
    background-color: red;
}

4.6 伪元素选择器

  • first-letter

    /*常用给首字母设置特殊样式*/
p:first-letter {
    font_size: 24px;
    color: red;
}

  • before

    /*在每个<p>元素之前插入内容*/
p:before {
    content: '*';
    color: red;
}

  • after

    /*在每个<p>元素之后插入内容*/
p:after {
    content: '?';
    color: blue;
}

    before和after多用于清除浮动

4.7 选择器的优先级

img

优先级：行内样式 > id选择器 > 类选择器 > 标签选择器

5. CSS属性相关

5.1 宽和高

​ width属性可以为元素设置高度。

​ height属性可以为元素设置高度。

​ 块级标签才能设置宽度，行内标签的宽度又内容来决定。

5.2 字体属性

  • 文字字体

    font-family可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用它可识别的第一个值

    body {
    font_family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

  • 字体大小

    p {
    font-size: 14px;
}
/*如果设置成inherit表示继承父元素的字体大小值*/

  • 字重(粗细)

    font-weight用来设置字体的字重(粗细)。

    值 描述
    normal 默认值，标准粗细
    bold 粗体
    bolder 更粗
    lighter 更细
    100-900 设置具体粗细，400等同于normal，700等同于bold
    inherit 继承父元素字体的粗细值

  • 文本颜色

    颜色属性被用来设置文字的颜色。

    颜色是通过CSS最经常的指定:

    • 十六进制值 如：#FF0000
    • 一个RGB值 如：RGB(255,0,0)
    • 颜色的名称 如：red

    还有rgba(255,0,0,0.3) 第四个值为alpha，指定了色彩的透明度/不透明度，范围为0.0到1.0之间

5.3 文字属性

  • 文字对齐

    text-align 属性规定元素中文本的水平对齐方式。

    值 描述
    left 左对齐，默认值
    right 右对齐
    center 居中对齐
    justify 两端对齐

  • 文字装饰

    text-decoration属性用来给文字添加特殊效果

    值 描述
    none 默认。定义标准的文本
    underline 定义文本下的一条线
    overline 定义文本上的一条线
    line-through 定义穿过文本下的一条线
    inherit 继承父元素的text-decoration属性的值

    常用的方法为去掉a标签默认的自划线：

    a {
    text-decoration: none;
}

  • 首行缩进

    将段落的第一行缩进32px：

    p {
    text-indent: 32px;
}

5.4 背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
*/
background-repeat：no-repeat；
/*背景位置*/
background-position:left top;
/*background-position：200px*200px;*/

/*支持简写*/
background:url('1.jpg') #336699 no-repeat left top

使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片，减少频繁的图片请求

5.5 边框

边框属性

  • border-width
  • border-style
  • border-color
#i1 {
    border-width: 2px;
    borstyle: solid;
    borcolor: red;
}

/*通常使用简写方式*/
#i1 {
    border：2px solid red;
}

边框样式

值 描述
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框

除了可以统一设置边框外还可以单独为某一个边框设置样式：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;    
}

5.6 border-radius

用这个属性能实现圆角边框的效果

将border-radius设置成长或高的一半即可得到一个圆形

5.7 display属性

用于控制HTML元素的显示效果。

值 意义
display:“none” HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block” 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline” 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block” 使元素同时具有行内元素和块级元素的特点。

display.’none’ 与 visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

posted @ 2019-05-29 15:23  Lip&amp;Hip  阅读(193)  评论(0)  编辑  收藏  举报