javaWeb-day06-html+css

最新推荐文章于 2021-06-10 00:07:32 发布

重庆森林呼呼呼

最新推荐文章于 2021-06-10 00:07:32 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/qq_34681728/article/details/106064237

版权

CSSCSS: 层叠样式表，用于修饰、渲染网页的一门技术使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力在HTML中引入CSS方式1：通过style属性引入css（不推荐）方式2：通过style标签引入css方式3：通过link链接引入外部的css文件01引入css.html<!DOCTYPE HTML><html><head> <meta charset="UTF-8">

摘要由CSDN通过智能技术生成

CSS

CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力

在HTML中引入CSS

方式1：通过style属性引入css（不推荐）
方式2：通过style标签引入css
方式3：通过link链接引入外部的css文件
01引入css.html

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
   <!-- 引入css的方式2: 在head标签内部的style标签内部书写css样式 -->
   <style type="text/css">
      /* ****** CSS样式 ****** */
      span{
    /* 选中当前网页中所有的span元素 */
         border:2px solid blue;
         font-size:30px;
         font-weight:bolder;
      }
   </style>
   
   <!-- 引入css的方式3: 通过link标签引入外部的css文件
      rel和href属性都是必须要书写的属性
      rel属性指定引入的文件类型是一个样式表文件(css文件)
    -->
   <link rel="stylesheet" href="demo.css"/>
   
</head>
<body>
   <!-- 
      1.通过标签上的style属性给div设置样式 
      边框:2px solid red 
      字体大小:26px
      背景颜色为:pink
   -->
   <!-- 2.通过style标签给span设置样式如下： 
      边框: 2px solid green
      字体大小: 30px
      字体加粗
   -->
   <!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下： 
      边框: 2px solid blue;
      字体颜色:red
      字体设置为华文琥珀
      设置首行文本缩进50px
   -->
   
   <!-- 引入css的方式1:直接在标签上通过style属性为元素设置样式(行内样式,内联样式) -->
   <div style="border:2px solid red;font-size:26px;background-color:pink;">
      这是一个div...
   </div>

   <br/>
   
   <span>span111</span>
   <span>span222</span>
   <span>span333</span>

   <p>p1111</p>
   <p>p2222</p>
   <p>p3333</p>
   
</body>
</html>

demo.css

@charset "UTF-8";
/* 为p元素设置样式 */
p{
   
   border:2px solid green;
   color:red;
   font-family:华文琥珀;
   text-indent:50px;
}

CSS选择器

所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术
1.标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
2.class选择器
可以为元素添加一个通用的属性 – class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式
格式：.class值{ css样式… }
另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：

<span class="s1 s2" >span111</span>

表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式
3.id选择器
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素
格式：#id值{ css样式 }
4.后代选择器
选中指定元素内部的指定后代元素
格式: 祖先后代{ css样式… }
5.属性选择器
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
格式：选择器[属性条件]…{ css样式 }
02选择器练习.html

<!DOCTYPE HTML>
<html>
<head>
<title>CSS选择器</title>
<meta charset="UTF-8" />
<style type="text/css" >
   /* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */
   body,input{
   font-size:18px;}
   input{
   border: 2px solid green;}
   div,span,p{
   border: 2px solid red;font-size:18px;}
   span{
   border-color: blue;margin-right:10px;}
   div,p{
    width:350px

最低0.47元/天解锁文章

重庆森林呼呼呼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb-day06-html+css

CSSCSS: 层叠样式表，用于修饰、渲染网页的一门技术使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力在HTML中引入CSS方式1：通过style属性引入css（不推荐）方式2：通过style标签引入css方式3：通过link链接引入外部的css文件01引入css.html<!DOCTYPE HTML><html><head> <meta charset="UTF-8">
复制链接

扫一扫