day04 css选择器属性

最新推荐文章于 2023-04-04 22:52:58 发布

会开的水仙花

最新推荐文章于 2023-04-04 22:52:58 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/weixin_44304606/article/details/100889356

版权

CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。

如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师

CSS初识

CSS(Cascading Style Sheets)

CSS：层叠样式表**，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

h1{                 color: red;  font-size: 25px}
选择器(标签选择器)     属性：属性值 用分号连接  
属性="属性值" 用空格链接

需要注意的是
	1.排版结构   用段落对齐的排版书写css

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

相对长度单位	说明
em	相对与页面的尺寸
px	像素，最常用，推荐你使用
in	英寸

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

1.一般网页都是14px以上的字体
2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
3.各种字体之间用英文状态下的逗号隔开
4.当字体是英文是，且有空格$#的时候，用双引号括起来
5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

Unicode,同一码，万国码，单一码，业界标准，它为每种语言的每个字符都设置一个唯一的二进制编码，以满足我们跨语言，跨平台进行文本转换，处理的要求

1.用英文表示

2.用unicode

3.一般用中文

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight的属性值

	normal,bold,lighter,100-900（100的整数倍）
700和boldr一样，400相当与normal

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：

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

重要重要重要

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

开发者工具

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

“按F12”打开开发者工具。

菜单：右击网页空白出—查看

小技巧
  1.ctrl加滚轮键可以放大代码
  2.可以同时查看html，css代码
  3.css样式可以实时更改

选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

基础选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名  {属性名1:属性值1；属性名2:属性值2；}

最大优点是快速为页面用类型的标签同一样式，也是他的缺点，不能设计差异化样式

类选择器

类选择器用"."(英文点号)进行表示，后面紧跟类名

.类名{属性名1:属性值1；属性名2:属性值2；}

类选择器最大优点就是可以为元素定义单独或相同的样式

1.长名称或词组可以使用中横线-为选择器命名
2.不建议使用下划线命名css选择器
	1.少按一个shift键
	2.区分js变量变量
	3.浏览器兼容问题，在IE6中 _tip无法生效的
3.不要用纯数字，中文命名，尽量用英文字母表示

多类名选择器

可以为标签增加多个类名，从而达到更多选择目的

1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
2.各个类名用空格连接

多类名选择器在后面项目常用到

id选择器

id选择器用"#"(英文点号)进行表示，后面紧跟id名

#id名{属性名1:属性值1；属性名2:属性值2；}

id是唯一的，只能对用文档中某一个具体的元素，id是html的id属性值，用法和类选择器类似

id相当身份证号(不得重复，只是用一次)，类选择器可以多次重复使用

通配符选择器

*{属性名1:属性值1；属性名2:属性值2}

所有选择器作用最广的，匹配所有元素

伪类选择器

伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素

类选择器用 . 伪类用 :

链接伪类选择器

: link 未访问的连接

:visited 、以访问的连接

:hover 鼠标悬停

:active 选定的连接


<ul>
        <li><a href="#">公司首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司产品</a></li>
        <li>
            <a href="#">联系我们</a>
            <ul>
                <li><a href="#">公司邮箱</a></li>
                <li><a href="#">公司电话</a></li>
            </ul>
        </li>
    </ul>

 <style>

			设置没有操作时候的颜色
        a:link{
            color: red;
        }
			设置鼠标悬浮的颜色
        a:hover{
            color: blue;
        }
      
   			设置访问后的
        a:visited {
            color: black;
        }
      


    </style>

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

1. :first-child/:last-child选择器

:first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。


<style type="text/css">
p:first-child{
	color:pink;
	font-size:16px;
	font-family:"宋体";
}
p:last-child{
	color:blue;
	font-size:16px;
	font-family:"微软雅黑";
}


<p>鲁山山行</p>
<p>适与野情惬，千山高复低。</p>
<p>好峰随处改，幽径独行迷。</p>
<p>霜落熊升树，林空鹿饮溪。</p>
<p>人家在何许？云外一声鸡。</p>

$[外链图片转存失败(img-T0H71w2U-1568619068805)(C:\Users\Administrator\Desktop\firstkid.png)]$

:nth-child(n)和:nth-last-child(n)选择器

使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或者倒数第2个子元素，这两个选择器就不起作用了。为此，CSS引入了:nth-child(n)和:nth-last-child(n)选择器

(n)可以是具体的数字，也可以是特定的行，比如奇数偶数设置差异化样式


<p>梅花</p>
<p>数萼初含雪，孤标画本难。</p>
<p>香中别有韵，清极不知寒。</p>
<p>横笛和愁听，斜枝倚病看。</p>
<p>朔风如解意，容易莫摧残。</p>

p:nth-child(odd)
{
    color: #f7ed2c;
}

这里设置奇数颜色为黄色

$[外链图片转存失败(img-Wvzd40Sm-1568619068806)(C:\Users\Administrator\Desktop\梅花.png)]$

注释

CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

例如：

p {
  font-size: 14px;                 /* 所有的字体是14像素大小*/
}

CSS外观属性

color:文本颜色

color属性用于定义文本的颜色，其取值方式有3种：

line-height:行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7.8像素左右就可以了。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

文字阴影(CSS3)

可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow 属性应用于阴影文本，只适用于文本，对图片等无效。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
color	可选。阴影的颜色。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text-shadow</title>
    <style type="text/css">
        #h3_1 {
            text-shadow: 2px 2px;
        }
        #h3_2 {
            text-shadow: 2px 2px #f00;
        }
        #h3_3 {
            text-shadow: 2px 2px 5px #f00;
        }
    </style>
</head>
<body>
<h3 id="h3_1">Text-shadow</h3>
<h3 id="h3_2">文本-阴影</h3>
<h3 id="h3_3">文本-shadow</h3>
</body>