HTML——CSS的基础语法1

时间:2023-03-08 16:45:11
HTML——CSS的基础语法1

页面中所有CSS代码,需要写入到<style></style>标签中。

style标签的type属性应该选择text/css,但是type属性可以省略。


1、CSS常用选择器

CSS修改页面中的所有标签,必须借助选择器选中。
选择器中可以写多对CSS属性,用{}包裹:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔

选择器{
 属性1:属性值1;
 属性2:属性值2;
 }


1-1、标签选择器

写法:HTML标签名{}
作用:可以选中页面中,所有与选择器同名的HTML标签。

li{
color: red;
font-size: 24px;
}

1-2、类选择器(class选择器)

写法:.class名{}
调用:在需要调用选择器样式的标签上,使用class="class名"调用选择器

优先级:class选择器>标签选择器,两个起冲突时,优先级高的生效

注意:如果需要两个类名,用空格分隔

.first{
color: blue;
}

1-3、id选择器

写法:#id名{}
调用:需要调用样式的标签,起一个id="id名"

优先级:id选择器>class选择器

注意:一个页面中,不能出现同名id

#one{
background-color: yellow;
}

【class选择器与id选择器的区别】
1、写法不同:class选择器用.声明,id选择器用#声明
2、优先级不同:id选择器>class选择器
3、作用范围不同:class选择器可以多次调用,id选择器只能使用一次。

选择器的命名规范
 1、只能有字母、数字、下划线、减号组成;
 2、开头不能是数字,也不能是只有一个减号

一般起名要求有语义,使用英文单词与数字的组合。


1-4、通用选择器

写法:*{}
作用:可以选中页面中所有的HTML标签
 优先级:最低!!!

*{
color: orange;
}

1-5、并集选择器

写法:选择器1,选择器2,选择器3,……,选择器n{}
生效规则:多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

li,.first{
color: red;
}

1-6、交集选择器

写法:选择器1选择器2……选择器n{} 所有选择器挨着,没有分隔
生效规则:多个选择器取交集,则必须满足所有选择器的要求,才能生效

li .first{

}

1-7、后代选择器

写法:选择器1 选择器2 …… 选择器n{} 选择器之间空格分割
生效规则:只要满足,后一选择器是前一个选择器的后代,即可生效。
(后代包括子代、孙代、重孙代。。。)

通俗地讲:只要后一个选择器,在前一个选择器里面即可。

div span{

}

1-8、子代选择器

写法:选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则:必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(中间不能隔任何标签)

div>span{

}

[伪类选择器]
写法:伪类选择器, 在选择器后面用:分隔,紧接伪类状态;
 eg: .a:link .a:visited .a:hover .a:active

2、超链接的伪类状态:
 :link--未访问状态 :visited--已访问状态
 :hover--鼠标指上状态 :active--激活选定状态(鼠标点下未松)

注意:当超链接多种伪类状态同时存在时,必须按照link--visited--hover--active的顺序,
 否则会导致部分选择器不生效。

3、input的伪类状态:
 :hover :focus--获得焦点状态 :active

注意:input的多种状态同时存在,必须按照上面的顺序。

4、其他标签,基本只用:hover状态。


2、CSS的导入方式及优先级权重

2-1、优先级的权重
1、CSS生效的第一原则是:近者优先! 即,哪个选择器作用于最里层标签,则这个选择器生效;
2、当选择器作用于同一层时,可以根据优先级权重进行累加计算:
id选择器*100>class选择器*10>标签选择器*1

注意:并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加

3、当选择器作用于同一层,且优先级权重相等时,写在最后的选择器 生效


2-2、引入CSS的三种方式
1、行内样式表:直接在HTML标签中,使用style=""的方式引用;
<div style="height: 100px; "></div>
优点:使用灵活,优先级权重最高;
 缺点:不符合w3c关于“内容与表现”分离的要求;不利于样式复用;
 2、内部样式表:在<head></head>标签中,使用<style>标签包裹CSS代码;
 特点:一定程度上实现了HTML与CSS的分离,但是分离不够彻底,没有办法多页面共用样式。
 3、外部样式表:将CSS单独写入CSS文件中,并于HTML文件关联。
优点:彻底实现HTML与CSS的分离,符合W3C规范,有利于多页面复用统一样式。

2-2-1、导入CSS文件的两种方式
1、在<head></head>标签中,使用link链接:

引入外部CSS样式表:
rel:选择stylesheet
type:选择text/css,可以省略
href:表示链接的CSS文件路径

 <link rel="stylesheet" type="text/css" href="CSS/02-CSS.css" />

2、在style标签中使用@import导入

@import url("CSS/02-CSS.css");

[两种导入方式的区别]

①link属于标准的HTML标签,而@import不是标准标签;
②link可以兼容所有低版本浏览器,而@import只在CSS2之后能用;
③link是将两个文件链接起来,起桥梁作用,而@import相当于将CSS文件复制到HTML文件中;
④link会在HTML文件边加载的过程中,边链接CSS文件;
 而@import会在HTML文件全部加载完以后,再导入CSS文件


3、CSS常用文本属性

^CSS中的颜色表示方式^
①直接使用颜色的单词表示:red green blue
②使用颜色的十六进制丨表示:#ffffff
    六位数,两两分组,分别表示红、绿、蓝的配比;
③使用rgb(0~255,0~255,0~255)三位数,分别表示红、绿、蓝的配比;
④rgba():第四位数表示透明度。

width: 200px;
height: 200px;
background-color: rgb(255,255,255);

3-1、CSS常用文本属性

1、字体字号类:
①font-weight: 字体粗细, bold-加粗、normal-正常、lighter-细体
 也可以使用100~900数值,400表示normal,700表示bold
②font-style: 字体样式。 italic-倾斜、normal-正常
③font-size:可以写像素单位px,也可以写%
200%表示浏览器默认大小(16px)的两倍=32px
④font-family: 字体系列(字体族)。
>>>可以直接写字体名,也可以直接写字体系列名。
>>>常用字体:serif-衬线体 sans-serif-非衬线体
font-family可以接收多个值,用逗号分隔。表示优先使用第一个,
>>>如果没有这个字体,依次向后使用。通常,最后一个值放字体系列名:
eg:fongt-family: "微软雅黑","宋体",sans-serif;
⑤font缩写形式:
>>>顺序必须是font-weight font-style font-size/line-height font-family
>>>不同属性之间用空格分隔;
>>>font-size/line-height必须一组,用/分隔
>>>font-family多个字体之间,用逗号分隔
eg: font: bold丁italic 32px/50px "微软雅黑",serif;

2、字体颜色
①color:字体颜色 可以是单词、十六进制、RGB等
②opacity:透明度,可选值0-1
[rgba和opacity的区别]
>>>RGBA本身可以设置颜色,而opacity必须配合其他颜色属性使用
>>>rgba仅仅是让当前元素设置的颜色透明;
而opacity,会让当前元素里面的所有文字、背景、子元素都透明。
3、行距、对齐、其他类
①line-height:行高。 可以写像素单位、可以直接写数字(表示默认行距的几倍)
 可以写%(表示默认行距的百分比
>>>行高重要作用:让单行文字在div中垂直居中
设置行高等于div的高度,及可让单行文字垂直居中。(非常 常用)
②text-algin:设置区域内的行级元素水平对齐方式;left、center、right
③letter-spacing: 字符间距,字与字之间的距离
④text-decoration: 文本修饰;
underline-下划线、overline-上划线、line-through-删除线、none

⑤overflow:设置超出区域文字的显示方式。
>>>overflow: hidden; 超出区域的文字吟唱不显示;
>>>overflow: scroll:无论文字多少,都会显示水平垂直滚动条;
>>>overflow: auto:自动,默认效果。文字多显示滚动条,文字少不显示滚动条
>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
overflow-x: scroll;overflow-y: hidden;

⑥text-overflow:设置行末多余文字的显示方式;
>>>clip:多余文字裁剪掉 ellipsis: 多余文字显示省略号
>>>显示省略号需要配合white-space:nowrap;使用
>>>【重点】设置行末显示省略号(三行代码,缺一不可)

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

⑦white-space:nowrap;设置中文行末,不断行显示

⑧text-indent:首行缩进。

⑨-webkit-text-stroke: 文字描边。
-webkit-表示挚友webkit内核的浏览器生效,常见的有chrome、safari

⑩text-shadow: 文字阴影,有四个属性值,空格分隔
>>>水平阴影距离,正数:表示阴影右移,负数:表示阴影左移;(左负右正)
 >>>垂直阴影距离,正数:表示阴影下移,负数:表示阴影上移;(上负下正)
 >>>阴影模糊距离,0表示阴影一点不模糊;
>>>阴影颜色;
缩写形式:text-shadow: 2px 2px 2px blue;

#div{
font-weight: bold;
font-style:italic;
font-size: ;
font-family: serif;
font: bold italic 16px/50px "微软雅黑",serif;
background-color: red;
opacity: 0.5;
line-height: 20px;
text-align: center;
letter-spacing: 5px;
text-decoration: underline;
overflow: auto;
white-space: nowrap;
text-overflow: ellipsis;
text-indent: 20px;
-webkit-text-stroke:0.5px blue;
text-shadow: 2px 2px 2px blue;
}

3-2、CSS常用背景属性

1、background-color:背景色

2、background-image: 背景图。 使用url("")选择背景图片。
背景图和背景色同时存在时,背景图覆盖背景色。

3、background-repeat: 背景图的重复方式,
 no-repeat:不平铺,repeat:平铺,repeat-x:沿x轴平铺,repeat-y:沿y轴平铺

4、background-size:背景图的大小
[指定宽度 高度的写法]
>>>宽度高度的指定,可以写px,也可以写%(父容器宽高的百分比)
>>>当写两个属性时,分别表示宽度、高度
>>>当写一个属性时,表示宽度,高度将会 等比缩放

[其他属性]
>>>contain:图片等比缩放,直到宽或高中较大的一边所放到100%为止。
(可能导致较短的一边<100%,图片无法覆盖全部区域)
>>>cover:图片等比缩放,直到宽或高中较小的一边缩放到100%为止。
(可能导致较大的一边>100%,图片超出区域显示不全)

5、background-position: 背景图偏移量
>>>指定位置:left/center/right top/center/bottom
 当只写一个值时,另一个默认居中。
>>>指定坐标:两个属性分别表示 水平位移 垂直位移
①坐标的值,可以是px单位,也可以是百分数
②当写像素单位时:
水平方向:正数右移 负数左移;垂直方向:正数下移 负数上移;
(左负右正 上负下正)
③当写%百分数时:一般只能是正数。
表示的是,父容器去掉图片的宽高,剩余空白区域的分布比例。
eg:background-position:30%; 水平方向去掉图片宽度,剩余区域3:7分

            #div2{
width: 25px;
height: 25px;
/*background-color: yellow;*/
background-image: url("img/icon.gif");
white-space: nowrap;
text-indent: 30px;
line-height: 25px;
background-position: -133px 0px;
}
#div3{
width: 24px;
height: 28px;
background-image: url("img/icon.gif");
white-space: nowrap;
text-indent: 30px;
background-position: 0px -170px;
}
#div4{
width: 42px;
height: 19px;
background-image: url("img/icon.gif");
text-indent: 9px;
font-size: 14px;
white-space: nowrap;
line-height: 16px;
background-position: 0px -30px;
}

※这里还有个小知识点

list-style: 修改小黑点的样式;
none 去点小黑点
url() 可以使用url导入一个小图片,作为列表的标识符号

float: 浮动  可以实现让块级元素,在一行中显示