一、标签基础选择器

在<head></head>标签内写上<style></style>标签，再在其中写入css选择器，<ul>标签位于<body>内。

1.1、标签选择器

标签名 {
    属性1： 属性值1：
    属性2：属性值2：
}

ul {

}
  • 为页面中某一类标签快速指定统一的CSS样式
  • 属性值前面，冒号后面，保留一个空格.标签名和大括号中间保留空格

1.2、类选择器

  • 差异化选择不同的标签，单独选一个或者几个标签
.类名 {
    属性1： 属性值1；
    .....
}
例如：
.red {
    color: red；
}

  • 同时结构需要用class属性来调用

    <div class='red'> 变红色的字体 </div>
  • 先添加类，后针对具体需要进行调用

1.3、id选择器

#red{
    color:red
}
<div id="red">变红</div>
  • id选择器只能被调用一次
  • id选择器通常用于页面唯一属性上且与js联合使用

1.4、通配符选择器

以 * 定义，自动应用于页面所有元素

* {
   属性1：属性2；
   ···
}

二、字体属性

2.1、font-family

  • 设置字体类型
p { 
    font-family:"微软雅黑"
}
div { 
    font-family:Arial,"Microsoft Yahe","微软雅黑"; 
}
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号

### 2.2、font-size

  • 设置字体大小
p{
    font-size: 20px;
}
  • 谷歌浏览器默认的文字大小为 16px

2.3、font-weight

  • 设置文字粗细
p {
   font-weight: normal/bold/···;
}
 /* 属性值的大小为100~900 */

2.4、font-style

  • 设置文字样式
p {
  font-style: normal;
}
属性值作用
normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式

2.5、字体属性复合写法

字体复合属性可以把以上文字样式综合来写，这样写更节约代码，例如：

<style>
        /* 想要div 文字变倾斜 加粗 字号为18像素 且为微软雅黑 */
        
        div {
            font-style: italic;
            font-weight: 700;
            font-size: 18px;
            font-family: 'Microsoft yahe';
            /* 复合属性：简写的方式  节约代码 */
            /* 顺序：font-style font-weight  font-size/line-height  font-family */
            font: italic 700 16px 'Microsoft yahe';
        }
</style>
  • 顺序：文字样式 文字粗细 文字大小 文字字体
  • 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略(取默认值)，但必须保留font-size 和font-family属性，否则 font 属性将不起作用

三、文本属性（外观）

3.1、color

  • 定义文本的颜色
div {
    color: red;
}/* 实际开发中常用十六进制 */

3.2、text-align

  • 设置文本内容的水平对齐方式
div {
    text-align:center;
}

3.3、text-decoration

  • text-decoration 属性用于装饰文本，可以给文本添加下划线，删除线，上划线等
div {
    text-decoration: underline;
}
属性值描述
none默认。没有装饰线(最常用)
underline下划线，链接自带下划线（常用）
overline上划线(几乎不用)
line-through删除线

  • 取消网站链接默认下划线🌟

    a {
  text-decoration: none;
} /* 取消a默认的下划线 */

3.4、text-indent

  • 用于指定文本的首行缩进，通常是将段落的首行缩进
  • 通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
  • em是一个相对单位，就是当前元素(font-size)1个文字的大小
  • 如果当前元素没有设置大小，则会按照父元素的一个文字大小

3.5、line-height

  • 设置行间的距离(行高)
p {
   line-height: 26px;
}
  • 行间距包括上间距、文本高度、下间距

四、CSS复合选择器

复合选择器：是由两个或多个基础选择器，通过不同的方式组合而成的

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

4.1、后代选择器

  • 后代选择器又称为包含选择器，可以选择父元素里面的子元素
元素1 元素2 {
    样式声明
}

上述语法表示选择元素1里面的所有元素2(后代元素)，例如

/*选择ul 里面的所有 li 标签元素*/
ul li {
    
    样式声明
    
}

4.2、子元素选择器

  • 子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
元素1 > 元素2{
    样式声明
}

上述语法表示选择元素1 里面的所有直接后代(子元素)元素2，例如

/*选择div里面所有最近一级 P 标签元素*/
div > p{
    声明
}

4.3、并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式。

  • 任何形式的选择器都可以作为并集选择器的一部分
元素1,元素2 {
    样式声明
}

上述语法表示选择元素1和元素2，例如

/*选择  ul 、div 和 .hot的ul标签元素 */
ul , div ,.hot ul  {
    样式声明
}

4.4、链接伪类选择器

  • 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
  • 伪类选择器书写最大的特点是**用冒号(如 :hover、:first-child)
  • 伪类选择器很多，比如有链接伪类、结构伪类、链接伪类选择器
/* a是标签选择器 */
a {
    color:gray;
}

/* :hover 是链接伪类选择器，鼠标经过 */
a:hover {
    /*鼠标经过的时候，由原来的灰色  变成了红色*/
   color:red; 
}
a:link {
    /*选择所有未被访问的链接*/
}

a:visited{
    /*选择所有已被访问的链接*/
}

a:hover{
    /*选择鼠标指针位于其上的链接*/
}

a:active{
    /*选话动链接（鼠标按下未弹起的链接）*/
}
  1. 为了确保生效，请按照LVHA的循顺序声明：link-:visited-:hover-:active。
  2. 因为链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
  3. 实际中经常使用的只有:hover

4.5、focus伪类选择器

  • :focus伪类选择器用于选取获得焦点的表单元素
  • 焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说
input : focus {
    background-color:green;
}

五、CSS元素显示模式

分为块元素和行内元素

5.1、块元素

  1. 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div> 标签是最典型的块元素。

  2. 块级元素的特点：

    • 自己独占一行
    • 高度，宽度，外边距以及内边距都可以控制
    • 宽度默认是容器（父级宽度）的100%
    • 是一个容器及盒子，里面可以放行内或块级元素

  3. 注意：

    • 文字类的元素内不能使用块级元素
    • <p> 标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
    • 2同理，<h1>~<h6>等都是文字类块级标签，里面也不能存放其他块级元素。

5.2、行内元素

  1. 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
  2. 其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

  3. 行内元素的特点：

    • 相邻行内元素在一行上，一行可以显示多个
    • 高，宽直接设置是无效的
    • 默认宽度就是它本身内容的宽度
    • 行内元素只能容纳文本或其他行内元素

注意：

  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

5.3、行内块元素

  1. 在行内元素中有几个特殊的标签 —— <img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点
  2. 有些资料称它们为行内块元素

  3. 特点：

    • 和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
    • 默认宽度就是它本身内容的宽度(行内元素特点)
    • 高度，行高，外边距以及内边距都可以控制(块级元素特点)

5.5、元素显示模式转换

  • 转换为块元素： display:block
  • 转换为行内元素： display:inline
  • 转换为行内块元素: display:inline-block
a {
    color:gray;
    display:block;
}

六、CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

6.1、background-color

  • 该属性定义了元素的背景颜色
background-color: transparent;

6.2、background-image

  • 该属性描述了元素的背景图像。
background-image : none / url(实际url)
/* background-image : url(image/logo.png) */
  • url + (实际路径)是固定写法
  • 如果出现图片无法显示现象，可能是div小于图片大小

6.3、background-repeat

  • 该属性定义背景图像的平铺
background-repeat: repeat / no-repeat / repeat-x / repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺(默认的)
no-repeat背景图像不平铺
repeat-x背景图像横向平铺
repeat-y背景图像纵向平铺
  • 页面元素既可以添加背景颤色也可以添加背景图片，只不过背景图片会压住背景颜色

6.4、background-position

  • 该属性可以改变图片在背景中的位置
background-position: x y;
  • 参数：X坐标 Y坐标
  • 可以使用 方位名词 或者 精确单位
参数值说明
length百分数 由浮点数字和单位标识符组成的长度值
positiontop center bottom left center right 方位名词

  1. 参数是方位名词

    • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

  2. 参数是精准单位

    • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

  3. 参数是混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

6.5、background-attachment

  • 该属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment : scroll / fixed
/*背景图像是随对象内容滚动/背景图像固定*/

6.6、背景复合写法

  • background ： 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background : transparent url(image.jpg) repeat-y fixed top;
  • 没有固定写法，但在开发中，我们常用以上写法。

6.7、背景色半透明

css3的半透明效果

background : rgba(0,0,0,0.3);
  1. 最后一个参数是alpha 透明度 ，取值范围在0~1之间
  2. 我们习惯把0.3的 0省略掉，写为background(0,0,0,.3)
  3. 背景半透明是指盒子背景半透明