初识CSS

最新推荐文章于 2024-05-21 13:46:15 发布

陌家宸少

最新推荐文章于 2024-05-21 13:46:15 发布

阅读量77

点赞数

分类专栏： HTML5+CSS3 文章标签： html5 css3 html 1024程序员节

本文链接：https://blog.csdn.net/weixin_56665165/article/details/120749118

版权

HTML5+CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

作用：设置版面的布局与样式

css三种引入方式

行内式

<h1 style="color:blue;font-size:16px;">你好呀</h1>

内嵌式

      <style type="text/css">
            p{
                color:red;
            }
        </style>

外链式

建一个.css文件，然后在.html文件的头部用link标签
h1 {
    color:blue;
    font-size=:60px;
 }
 h2 {
     color:red;
     font-size=:30x;
     
 }
<head>
     <link rel="stylesheet" type="text/css" href="demo1.css"/>
</head>

CSS基础选择器
写在head里，style标签内

标签选择器

       <style type="text/css">
            p{
                text-indent:2em;
            }
        </style>

类选择器

<head>
      <style type="text/css">
            .blue{
                color:blue;
            }
        </style>
 </head>
 <boby>
     <p class="blue">
          你好呀
     </p>
 </boby>

id选择器

<head>
      <style type="text/css">
            #red{
                color:red;
            }
        </style>
 </head>
 <boby>
     <p id="red">
          你好呀
     </p>
 </boby>

通配符选择器
用*表示，它是选择器范围里最广泛的，能匹配到页面内所有的元素。会降低代码的执行速度，通常不用。

设置文本样式

1.font

font-style:字体风格
normal:默认值，正常字样
italic：斜体样式(在HTML里em标签使文字显示斜体)
oblique:倾斜样式
font-weight:字体粗细
一般情况都用100-900的数字表示
400等同于normal(正常)，700等同于bold(加粗)数字越大字体越粗
font-size:字号大小
谷歌浏览器默认为16px
font-family:字体
1可以同时指定多个字体，中间用英文状态下的逗号隔开
2中文字体需要加英文状态下的双引号，英文字体不用
3设置英文字体时，英文字体必须在中文字体之前
4如果包含空格、#等符号也要加双引号
font:综合设置

选择器{font:font-style font-weight font-size font-family}

必须按着上面的顺序，其中font-size和font-family是必须写的，其他可以不写，中间用空格隔开

文本外观属性

color
letter-spacing:字间距
word-spacing:单词间距
line-height:行间距
text-decoration:
none：没有装饰
underline：下划线（HTML中ins标签）
overline：上划线
line-through:删除线（HTML中del标签）
text-aline:水平线对齐方式
left：左对齐（默认）
right：右对齐
center：居中对齐
text-indent:首行缩进
1em=1个汉字的宽度

CSS复合选择器
选择器都是写在style里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css"> 
          
            /*后代选择器 */            
             .one p strong{
                 color:green;
              }
              
              /* 子元素选择器 */
                div>.student{
                   color:red;
                } 
                /* 并集选择器 */
                h1,.teacher{
                    font-size:16px;
                    font-weight:700;
                    background-color:#7DF7B4;
                    color:#BE4EAD;   
                }
                /* 类选择器   */
                .two{
                    font-size:16px;
                    color:blue;
                }
              /* id选择器 */
              #change1{
                 display:inline;
                 height:200px;
                 background-color:green;
             }
             /* 标签选择器   将行内元素转换为块元素*/
              span{
               display:block;
               height:200px;
               background-color:pink;
             }
             /* 链接伪类选择器 */            
            a{
                font-size:16px;
                font-weight:700;                
            }
            a:link{
                color:red;
            }
            a:visited{
                color:yellow;
            }
            a:hover{
                color:blue;
            }
            a:active{
                color:pink;
            }
        </style>
	</head>
	<body>
        <div class="one">
            <strong>儿子</strong>
            <strong>儿子</strong>
            <strong>儿子</strong>
            <p>
                <strong>儿子</strong>
                <strong>儿子</strong>
                <strong>儿子</strong>
            </p>
            <p class="student">
                我是名学生
            </p>
        </div>
        <div id="change1">
            你好呀
        </div>
        <p class="teacher">我是名教师</p>
        <h1>我喜欢水果</h1>
        <h2 class="two">大家好！</h2>
        <span>我很好</span> 
        <!-- <a href="#">百度</a> -->
        <a href="#">xiaomi</a>
	</body>
</html>

在这里插入图片描述

后代选择器
多个标签之间用空格隔开div p strong{color:red;}
子元素选择器
必须是亲父子关系,之前用大于号div>strong{color:blue;}
交集选择器
之间用点隔开p.class{color:yellow;}
并集选择器
选择不同的标签.block,h3{color:green;}
链接伪类选择器
作用：用于向某些选择器添加特殊效果（不止链接伪类选择器）
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标悬停时的链接
a:active 选定时的链接（鼠标选中但还未放开时）
在使用这些时，如果全都使用，顺序不能颠倒

陌家宸少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS

初识CSS3作用：设置版面的布局与样式css三种引入方式行内式<h1 style="color:blue;font-size:16px;">你好呀</h1>内嵌式 <style type="text/css"> p{ color:red; } </style>外链式建一个.css文件，然后在.html文件的头部用link标签
复制链接

扫一扫

专栏目录