您现在的位置是:首页 > 技术教程 正文

web CSS笔记1

admin 阅读: 2024-03-31
后台-插件-广告管理-内容页头部广告(手机)

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表(书写位置)

1、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

   

    Document

   

2、行内式(内联样式)

 是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容

3、外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

 
 

一个CSS文件可以什么都不写,引用其他CSS文件 

@import url(xxx.css的路径)


选择器

1、类选择器(基本选择器)

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

 标签调用的时候用 class=“类名”  即可。

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.      .box1 {
  7.             width: 100px;
  8.             height: 100px;
  9.             background-color: pink;
  10.         }
  11.     style>
  12. head>
  13. <body>
  14.     <div class="box1">1111div>
  15. body>
  16. html>

2、标签选择器(基本选择器)

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

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

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.      div{
  7.             height: 100px;
  8.             background-color: pink;
  9.         }
  10.     style>
  11. head>
  12. <body>
  13.     <div >1111div>
  14. body>
  15. html>

3、ID选择器(基本选择器)

1、id选择器使用“#”进行标识,后面紧跟id名。

2、id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

3、W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

4、区别:

        类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

        id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.      #box{
  7.             width: 100px;
  8.             background-color: pink;
  9.         }
  10.     style>
  11. head>
  12. <body>
  13.     <div id=”box“>1111div>
  14. body>
  15. html>

4、通配符选择器(基本选择器)

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

例如:如下表示设置HTML默认所有字体颜色为白色。

  1.   <style>
  2.      *{
  3.             color:white;
  4.         }
  5.     style>

5、子代选择器(包含选择器)

子元素选择器只能选择某元的子元素。

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.         .a>li {
  7.             color: red;
  8.         }
  9.     style>
  10. head>
  11. <body>
  12.     <ul class="a">
  13.             <li>你是亲儿子li>
  14.             <li>我是一个lili>
  15.             <ul>
  16.                     <li>后代li>
  17.             ul>
  18.     ul>
  19. body>
  20. html>

6、后代选择器(包含选择器)

后代选择器用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

/* 后代选择器  找到所有后代中满足的标签*/

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.         a li{
  7.             color: red;
  8.         }
  9.  
  10.     style>
  11. head>
  12. <body>
  13.     <ul class="a">
  14.         <li>你是亲儿子li>
  15.         <li>我是一个lili>
  16.         <li>我是一个lili>
  17.         <li>我是一个lili>
  18.         <ul>
  19.             <li>后代  <b><li>后代li>b> li>
  20.         ul>
  21.     ul>
  22. body>
  23. html>

7、逗号选择器(并集选择器)(包含选择器)

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

  1. html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Documenttitle>
  5.     <style>
  6.         .one, p , #t {
  7.             color: #F00;
  8.             font-weight: 700;
  9.         }
  10.     style>
  11. head>
  12. <body>
  13.    <div class="one">佳人们这是类选择器div><br>
  14.    <span id="t">佳人们这是id选择器span><br>
  15.    <p>佳人们这是标签选择器p>
  16. body>
  17. html>

7.1交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。  

交集选择器 是 并且的意思。 即...又...的意思

比如:   p.one   选择的是: 类名为 .one  的 段落标签。 

用的相对来说比较少,不太建议使用。

8、属性选择器

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. /* */
  7. input[type="password"] {
  8. background-color: aqua;
  9. }
  10. /* 具有某个属性的指定标签 */
  11. div[title] {
  12. background-color: pink;
  13. }
  14. /* 属性的值中包含某个值 */
  15. input[type*="e"] {
  16. background-color: blueviolet;
  17. }
  18. /* 属性值以什么开头 */
  19. input[type^="p"] {
  20. background-color: brown;
  21. }
  22. /* 属性值以什么结尾 */
  23. input[type$="t"] {
  24. background-color: red;
  25. }
  26. /* +表示的是下一个标签 */
  27. .box1+p {
  28. background-color: blue;
  29. }
  30. style>
  31. head>
  32. <body>
  33. <div title="njdcndc">你是一个盒子div>
  34. <div>你是一个da盒子div>
  35. <input type="text">
  36. <input type="password">
  37. <input type="email">
  38. <div class="box1">ncjdncjddiv>
  39. <p>mckdckdp>
  40. <p>mckdckdp>
  41. body>
  42. html>

9、伪类选择器 :描述标签的状态的

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. /* 访问前 */
  7. a:link {
  8. color: red;
  9. }
  10. /* 访问后 */
  11. a:visited {
  12. color: chartreuse;
  13. }
  14. /* 鼠标悬停时 */
  15. a:hover {
  16. color: pink;
  17. }
  18. /* 鼠标点击时 */
  19. a:active {
  20. color: darkblue;
  21. }
  22. /* 需要按照lvha的顺序书写 */
  23. style>
  24. head>
  25. <body>
  26. <a href="#">这是一个链接a>
  27. body>
  28. html>

9、1:其他伪类选择器

假如想要选择ul标签下的第2个li标签,该如何使用选择器呢?

那么第一个和最后一个呢?第奇或偶个这样的排序可以吗?

   

           

  • 我是一个li1
  •        

  • 我是一个li2
  •        

  • 我是一个li3
  •        

  • 我是一个li4
  •        

  • 我是一个li5
  •        

  • 我是一个li6
  •        

  • 我是一个li7
  •        

  • 我是一个li8
  •    

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. ul li:nth-child(2) {
  7. background-color: green;
  8. }
  9. li:nth-child(2n+1) {
  10. background-color: blue;
  11. }
  12. li:last-child {
  13. background-color: red;
  14. }
  15. ul li:first-child {
  16. background-color: yellow;
  17. }
  18. style>
  19. head>
  20. <body>
  21. <ul>
  22. <li>我是一个li1li>
  23. <li>我是一个li2li>
  24. <li>我是一个li3li>
  25. <li>我是一个li4li>
  26. <li>我是一个li5li>
  27. <li>我是一个li6li>
  28. <li>我是一个li7li>
  29. <li>我是一个li8li>
  30. ul>
  31. body>
  32. html>

若中间插入其他元素,还能识别得到吗?(源代码加上p标签)

   

           

  • 我是一个li1
  •        

    我是p

           

  • 我是一个li2
  •        

  • 我是一个li3
  •        

  • 我是一个li4
  •        

  • 我是一个li5
  •        

  • 我是一个li6
  •        

  • 我是一个li7
  •        

  • 我是一个li8
  •          

    我是p

       

这时候我们可以看到寻找第二个li标签与最后一个li标签失败

li:nth-child()是先找到li标签的父亲是谁,例子中是ul标签,然后他就给ul标签所有儿子标签排了序,排序过程中并不会辨别标签类别,所以会将p标签一起排进来,但是他一数第二个标签不是li标签,所以识别不了,于是他会在不认识的p标签之下,重新开始数。所以后面的奇数标签有用。

这时我们用个新属性:nth-of-type(),他与上面属性最大的区别就是他会认识类别,并只将指定类别排序。看看代码,让第二个 li 变成粉色。

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. ul li:nth-child(2) {
  7. background-color: green;
  8. }
  9. li:nth-child(2n+1) {
  10. background-color: blue;
  11. }
  12. li:last-child {
  13. background-color: red;
  14. }
  15. ul li:first-child {
  16. background-color: yellow;
  17. }
  18. li:nth-of-type(2) {
  19. background-color: pink;
  20. }
  21. style>
  22. head>
  23. <body>
  24. <ul>
  25. <li>我是一个li1li>
  26. <li>我是一个li2li>
  27. <li>我是一个li3li>
  28. <li>我是一个li4li>
  29. <li>我是一个li5li>
  30. <li>我是一个li6li>
  31. <li>我是一个li7li>
  32. <li>我是一个li8li>
  33. ul>
  34. body>
  35. html>

10、伪元素选择器--只能对“块级元素”生效。

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. ul li::before { /* ul标签中的li标签前面做什么 */
  7. content: "66666"; /* 添加文本 */
  8. width: 10px;
  9. height: 10px;
  10. background-color: pink;
  11. }
  12. ul li::after { /* ul标签中的li标签后面添加什么 */
  13. content: "----------------zhangsan";
  14. }
  15. /* 文字被选中时 */
  16. ul li::selection {
  17. background-color: pink;
  18. }
  19. style>
  20. head>
  21. <body>
  22. <ul>
  23. <li>zhangsanli>
  24. ul>
  25. body>
  26. html>

11、:target选择器

:target 选择器用于为页面中的某个target 元素(该元素的id被当做页面中的超链接来使用)指定样式。只有用户单击了页面中的超链接,并且跳转到targget元素后,:target选择器所设置的样式才会起作用

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>:target选择器的使用</title>
  5. <style>
  6. :target{
  7. background-color: red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>标题</h1>
  13. <p><a href="#d1">佳人们不想学习</a></p>
  14. <p><a href="#d2">离谱,简直见鬼了</a></p>
  15. <h1>请单击上面的链接,:target选择器会突出显示当前活动的html锚点</h1>
  16. <p id="d1"><b>佳人们谁懂啊</b></p>
  17. <p id="d2"><b>好了会睡觉吃饭的自己棒棒哒</b></p>
  18. </body>
  19. </html>

 


字体与文本

font-size:字号大小

        font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,谷歌默认14px

font-family:字体

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

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

font-weight:字体粗细

数字 400 等价于 normal,而 700 等价于 bold。  但是我们倾向用数字来表示。 

font-style:字体风格

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

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

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

line-height设置行高
text-indent 首行缩进,以em为单位
color文本颜色

color=

1、rgb函数(红、绿、蓝)三原色 

2、rgba函数(红、绿、蓝、透明度) 

3、#00FFFF

text-align:水平对齐方式

相当于html中的align对齐属性。

left:左对齐(默认值)

right:右对齐

center:居中对齐,是让盒子里面的内容水平居中

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果。none:           默认。定义标准的文本。

underline:    定义文本下的一条线。下划线是链接自带的

overline:      定义文本上的一条线。

line-through:定义穿过文本下的一条线。

font:综合设置字体样式  

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

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

2、注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. div{
  7. font: italic 600 25px/50px 宋体;
  8. line-height: 50px;/* 让行高等于容器的高度,来实现单行文本的垂直居中 */
  9. color: blue;
  10. text-align: center;
  11. background-color: yellow;
  12. }
  13. style>
  14. head>
  15. <body>
  16. <div>
  17. font:综合设置字体样式
  18. div>
  19. body>
  20. html>

text-decoration:综合设置文本样式

选择器{text-decoration: text-decoration-style   td-line    td-color    td-thickness;}   

例如 :text-decoration: solid underline purple 4px;

text-decoration-style:设置使用的装饰类型,例如 underline 或者 line-through。 

text-decoration-line:设置装饰的线条的颜色,例如 solid、wavy 或者 dashed。

text-decoration-color:颜色

text-decoration-thickness:字体粗细


CSS三大特性

1、层叠性

  1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。

  2. 样式不冲突,不会层叠

  1. html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Documenttitle>
  6. <style>
  7. p{
  8. color: red;
  9. }
  10. p {
  11. color: yellow;
  12. font-style: italic;
  13. text-decoration: underline;
  14. }
  15. p{
  16. color: blue;
  17. }
  18. style>
  19. head>
  20. <body>
  21. <p class="one">层叠性佳人们是什么色p>
  22. body>
  23. html>

2、继承性

子标签会继承父标签的某些属性(字体颜色、字号)

  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. .father {
  7. font-size: 30px;
  8. color: red;
  9. }
  10. style>
  11. head>
  12. <body>
  13. <div class="father">
  14. <div>你是一个子盒子<div>你是一个子盒子div>div>
  15. div>
  16. body>
  17. html>

3、优先级

1、继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

3、权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

4、CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

* 通配符0.0.0.0
元素(标签)0,0,0,1
类,伪类0,0,1,0
ID0,1,0,0
行内样式1,0,0,0
!important 重要的∞ 无穷大
  1. html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Documenttitle>
  5. <style>
  6. /* * {
  7. color: pink;
  8. } */
  9. div {
  10. color: aquamarine !important;
  11. }
  12. .one {
  13. color: blueviolet;
  14. }
  15. #two {
  16. color: brown;
  17. }
  18. ul li {
  19. background-color: blue;
  20. }
  21. li {
  22. background-color: pink;
  23. }
  24. /* 权重的四位数字不会进行进位,
  25. 登记大小的判断,从左向右,一次进行比较
  26. 继承的权重:为0
  27. */
  28. a {
  29. display: inline-block;
  30. }
  31. style>
  32. head>
  33. <body>
  34. <div class="one" id="two">cnvjfvnjfvnjfvnfjdiv>
  35. <ul>
  36. <li>我是一个lili>
  37. ul>
  38. <a href="#">充满电充电口a>
  39. body>
  40. html>

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索