CSS样式

最新推荐文章于 2021-06-21 13:49:33 发布

寒漪hy

最新推荐文章于 2021-06-21 13:49:33 发布

阅读量186

点赞数

分类专栏： 1

本文链接：https://blog.youkuaiyun.com/qq_45146082/article/details/101021230

版权

1 专栏收录该内容

25 篇文章

订阅专栏

CSS样式

CSS初识

CSS样式规则

CSS字体样式属性

开发者工具

选择器

CSS初识

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容、图片外形以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了字体、颜色、背景的控制及整体排版等功能。

CSS样式规则

<img src="media/gz.png" />

在上面的样式规则中:

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

CSS字体样式属性

font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
CSS Unicode字体
比如 font-family:“Microsoft Yahei”
font-weight:字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter等。
font-style:字体风格
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

开发者工具

小技巧：

ctrl+滚轮可以放大开发者工具代码大小。
左边是HTML元素结构右边是CSS样式。
右边CSS样式可以改动数值和颜色查看更改后效果。

选择器

标签选择器（元素选择器）
指用HTML标签名称作为选择器，按标签名称分类

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

优点：能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式

类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名

优势：可以为元素对象定义单独或相同的样式

注：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，尽量使用英文字母来表示。

案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
         font-size: 100px;
        }
        .blue {
         color: blue;
        }
        .red {
         color: red;
        }
        .orange {
   color: orange;
        }
  .green {
   color: green;
  }
        </style>
    </head>
    <body>
     <span class="blue">G</span>
     <span class="red">o</span>
     <span class="orange">o</span>
     <span class="blue">g</span>
     <span class="green">l</span>
     <span class="red">e</span>
    </body>

多类名选择器
可以给标签指定多个类名，从而达到更多的选择目的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器
使用“#”进行标识，后面紧跟id名

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

id选择器和类选择器区别：
1.在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
2.类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟；id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

通配符选择器
用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

伪类选择器

1.链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

a {   /* a是标签选择器  所有的链接 */
   font-weight: 700;
   font-size: 16px;
   color: gray;
  }
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
   color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

2.结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式

li:first-child { /*  选择第一个孩子 */
          color: pink; 
         }
li:last-child {   /* 最后一个孩子 */
          color: purple;
         }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
    color: skyblue;
         }

3.目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
  color: red;
  font-size: 30px;
}