一、CSS基础认识

最新推荐文章于 2023-06-04 10:30:00 发布

HJHO

最新推荐文章于 2023-06-04 10:30:00 发布

阅读量218

点赞数

分类专栏： CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120307547

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是css

CSS指层叠样式表(Cascading Style Sheets)。

2.css的作用

CSS是用来为网页html元素设置/添加样式，使得html网页好看。

3.在HTML网页中如何使用CSS?

内联定义 (Inline Styles)

将样式属性设置，通过style属性设置在html标记的开始标记中。

格式:<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>

内部样式块

将样式设置，放在head的style标记中。

格式: css选择器{

          css样式名称:样式值;

                  css样式名称:样式值;

      css样式名称:样式值;

}

链入外部样式表文件 Linking to a Style Sheet

通过在head标记中的link标记将外部样式文件【.css】导入至当前的html文件中

<link rel=stylesheet href="样式文件的路径"  type="text/css">

图示👇

4.css语法

我们发现在内部样式块,链入外部样式表的方式中，编写css样式的操作格式是相同

格式:

css选择器{

          css样式名称:样式值;

          css样式名称:样式值;

          css样式名称:样式值;

}

上面编写css样式的操作格式有2部分组成

css选择器
具体样式设置--->键值对【css样式名称:取值】

图解👇

代码例👇

 #p1{
    font-size: 30px;
    color: blue;
}

注意：具体样式设置，多个样式属性设置之间使用”;”分割。

5.css选择器

css选择器就是选中需要设置样式的html元素。
css中提供的选择器很多。我们学习几个常用的选择器。

（1）元素选择器

根据html元素名称得到需要设置样式的html元素，如果有多个名称相同的元素，全部被选中，作用同一种样式。

图例👇

（2）id选择器

id选择器---根据html元素的id属性值得到需要设置样式的html元素，如果有多个id属性相同的元素，全部被选中，作用同一种样式(id名字建以是唯一的)。

图解👇

（3）class选择器

class选择器---根据html元素的class属性值得到需要设置样式的html元素，如果有多个class属性相同的元素，全部被选中，作用同一种样式。

图解👇

注意:选择器优先级: id > class > 元素

（4）包含选择器

包含选择器--得到父元素中所有子元素,以及所有的后代元素。

图解👇

（5）子元素选择器

子元素选择器--选中当前父元素的直接子元素，不包括子子元素。

图解👇

（6）属性选择器

属性选择器--根据html元素的属性，得到需要设置css的html元素

图解👇

（7）选择器分组

选择器分组--得到同一个html文件中不同位置的元素，作用同一种样式。用 , 隔开。

注意:选择器在使用时候都是混合使用，可以让我们很快得到自己需要控制的元素。

代码例👇

.p1,#p2,p,input[name="username"]{
    color : pink;
    font-size : 30px
}

（8）常用的伪类

:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点

代码例👇

<head>
 <meta charset="utf-8">
 <title>CSS 伪类</title>
 <style>
     a:link {
         font-size: 20px;
         color: red;
     }
     a:hover {
         font-size: 30px;
         color: pink;
     }
     a:active {
         font-size: 40px;
         color: orange;
     }
     
     a:visited {
         font-size: 50px;
         color: green;
     }
 </style>
</head>
<body>
    <a href="#">超链接元素</a>
</body>

运行结果👇

6具体样式设置

（1）CSS背景

CSS背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color ：背景颜色

值：颜色单词/颜色码/rgb

background-image ：背景图片

值：url('图片路径')

background-repeat ：设置背景图像水平或垂直平铺

值：

1.repeat-x:水平平铺

2.repeat-y:垂直平铺

3.repeat:水平垂直平铺

4.no-repeat:不平铺

background-attachment ：设置背景图像是否固定或者随着页面的其余部分滚动。

值：

        scroll  背景图片随着页面的滚动而滚动，这是默认的。

        fixed   背景图片不会随着页面的滚动而滚动。

        local   背景图片会随着元素内容的滚动而滚动。

background-position：设置背景图像是否固定或者随着页面的其余部分滚动。

        值：

1. left top/left center/ left bottom /right top/right center/

2.px 或者 %

代码例👇

<head>
  <meta charset="UTF-8">
  <title>css背景</title>
  <style>
    body{
      color: white;
      background-color: pink;
      /* 图片需要自己处理 */
      background-image: url('../imgs/2048376.jpg');
      background-position: top;
      background-repeat: no-repeat;
      background-attachment:fixed;
      background-size: 500px 500px;
    }
  </style>
</head>
<body>
  <p>莆田新型冠状病毒肺炎疫情情况（9月14日0-24时）
    　　9月14日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例73例。其中境外输入病例23例（云南13例，广东4例，上海2例，天津1例，浙江1例，福建1例，河南1例），含4例由无症状感染者转为确诊病例（天津1例，浙江1例，福建1例，广东1例）；本土病例50例（均在福建，其中莆田市33例、厦门市12例、泉州市5例），含9例由无症状感染者转为确诊病例（均在福建）。无新增死亡病例。新增疑似病例1例，为境外输入病例（在上海）。
    　　当日新增治愈出院病例46例，解除医学观察的密切接触者1011人，重症病例与前一日持平。
    　　境外输入现有确诊病例596例（其中重症病例4例），现有疑似病例1例。累计确诊病例8701例，累计治愈出院病例8105例，无死亡病例。
    　　截至9月14日24时，据31个省（自治区、直辖市）和新疆生产建设兵团报告，现有确诊病例837例(其中重症病例4例），累计治愈出院病例89940例，累计死亡病例4636例，累计报告确诊病例95413例，现有疑似病例1例。累计追踪到密切接触者1175662人，尚在医学观察的密切接触者15205人。
    　　31个省（自治区、直辖市）和新疆生产建设兵团报告新增无症状感染者16例，其中境外输入15例，本土1例（在福建厦门市）；当日转为确诊病例13例（境外输入4例）；当日解除医学观察18例（境外输入13例）；尚在医学观察的无症状感染者386例（境外输入360例）。
    　　累计收到港澳台地区通报确诊病例28309例。其中，香港特别行政区12148例（出院11854例，死亡213例），澳门特别行政区63例（出院63例），台湾地区16098例（出院13742例，死亡839例）。
    　　温馨提示：
    　　/微信搜索并关注【莆田本地宝】公众号，在对话框中回复【疫情】点击发送，即可获取莆田疫情防控最新公告（含最新隔离+核酸政策），包括国内高中低风险地区来/回莆田的隔离核酸政策以及境外人员返回莆田的隔离核酸政策，还有莆田最新疫情消息和新增病例官方数据，还能查看全国高中低风险地区划分名单及莆田各级疾控中心联系电话等信息。
  </p>
</body>

图解👇

注意：简写=> body {background:color url('img_tree.png') no-repeat right top;}

(2)CSS 文本属性设置

**css文本属性**
含义	属性	值
文字颜色	color	1.颜色单词 2.颜色码 3.rgb
水平对齐的方式	text-align	1.left：左对齐（默认） 2.right：右对齐 3.center:居中对齐
设置或删除文本的装饰	text-decoration	1.overline：上划线 2.line-through：中划线 3.underline：下划线 4none：没有线
文本中字母大小写	text-transform	1.uppercase ：大写 2.lowercase ：小写 3.capitalize：首字母大写
文本的首行的缩进	text-indent	1.px ：像素 2.em ：当前元素的文字大小
设置字符间距	letter-spacing	1.px ：像素 2.em ：当前元素的文字大小
行高	line-height	1.px ：像素 2.em ：当前元素的文字大小
文本元素的垂直对齐方式	vertical-align	1.top：顶部对齐 2.middle：垂直居中 3.button：底部对齐
增加或减少字之间的空白	word-spacing	1.px ：像素 2.em ：当前元素的文字大小
文字阴影	text-shadow	text-shadow: 20px 20px 1px red; 水平垂直模糊颜色

代码例👇

<head>
  <meta charset="UTF-8">
  <title>文字样式</title>
  <style>
    p{
      width: 300px;
      border: 1px solid pink;
    }
    .color{
      color: pink;
    }
    .colalign{
      text-align: center;
    }
    .deletex{
      text-decoration: line-through;
    }
    .maxmin{
      text-transform: uppercase;
    }
    .fristline{
      text-indent : 2em;
    }
    .charjianju{
      letter-spacing: 2em;
    }
    .lineheight{
      line-height: 40px;
    }
    .kgjuli {
      word-spacing: 30px;
    }
    .textshadow{
      text-shadow: 2px 2px 3px gray;
    }
  </style>
</head>
<body>frist
  <p class="color">文字的颜色</p>
  <p class="colalign">水平对齐的方式center</p>
  <p class="deletex">设置或删除文本的装饰</p>
  <p class="maxmin">文本中字母大小写abc</p>
  <p class="fristline">首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进</p>
  <p class="charjianju">设置字符间距</p>
  <p class="lineheight">设置行高</p>
  <p class="kgjuli">hello world</p>
  <p class="textshadow">字体的阴影效果</p>
</body>

图例👇

无奈源于不够强大

HJHO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、CSS基础认识

1.什么是cssCSS 指层叠样式表 (CascadingStyleSheets)。2.css的作用CSS是用来为网页html元素设置/添加样式，使得html网页好看。3.在HTML网页中如何使用CSS?内联定义 (Inline Styles)将样式属性设置，通过style属性设置在html标记的开始标记中。格式:<html标记 style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>内部样式块将样式...
复制链接

扫一扫