初识CSS

最新推荐文章于 2019-08-23 16:29:31 发布

啊侠

最新推荐文章于 2019-08-23 16:29:31 发布

阅读量87

点赞数

分类专栏： Java学习文章标签：初识CSS

本文链接：https://blog.csdn.net/weixin_44821160/article/details/92798996

版权

Java学习专栏收录该内容

35 篇文章 0 订阅

订阅专栏

初识CSS

CSS：Cascading Style Sheet 层叠样式表

CSS是表现HTML文字样式的语言，在HTML中可以修改字体、颜色等各种样式。

CSS的优点

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS ，有利于网页被搜索引擎收录

CSS的基础语法

CSS中的注释是用/**/来注释的。
CSS的基本语法是：

style标签写在HTML文档中head标签中，

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抬头：网页名称</title>
    <!--内部样式-->
    <style>
        /*CSS的注释方法*/
        /*基础语法*/
        h1{
            font-size: 12px;
            color: aqua;
        }
    </style>
</head>
<body>
<!--HTML的注释方法-->
<h1>网页中要显示的字样</h1>
</body>
</html>

CSS的引入方式

行内样式：使用style属性引入CSS样式。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抬头：网页名称</title>
</head>
<body>

<!--行内样式-->
<h1 style="color: aqua;font-size: 20px">网页中要显示的字样</h1>

</body>
</html>

内部样式表：CSS代码写在的

CSS样式优先级

CSS样式优先级遵循就近原则：行内样式>内部样式表>外部样式表。

CSS基础选择器

标签选择器：用HTML的标签做为标签选择器的标签名称；

如：p { font-size:16px;}中的‘p’就是标签选择器，而定义在HTML中的‘p’标签就与之对应。
类选择器：在标签名后面定义一个类名，在style标签中.类名称，就可以使用类选择器了；

如：<标签名 class= “类名称”>标签内容</标签名>

.class { font-size:16px;}
ID选择器：

ID选择器在使用前要定义一个ID：<标签名 id= “id名称”>标签内容</标签名>

使用时用#来启动ID选择器如：#id { font-size:16px;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抬头：网页名称</title>

    <style>
        p{
            font-size: 10px;
            color: blue;
        }
        
        .aa{
            font-size: 15px;
            color: brown;
            text-align: center;
        }
        #bb{
            font-family: 隶书;
            color: aqua;
            text-align: justify;
        }
    </style>
</head>
<body>

<!--标签选择器-->
<p>标签选择器</p>
<!--类选择器-->
<!--类名是“aa”-->
<h1 class="aa">类选择器</h1>
<!--id选择器-->
<!--id名为“bb”-->
<h2 id="bb">id选择器</h2>

</body>
</html>

CSS基础选择器优先级

基本选择器不遵循就近原则，ID选择器>类选择器>标签选择器

高级选择器

层次选择器

选择器	类型	功能描述
E F	后代选择器	作用范围是E以下的所有F
E>F	子选择器	作用范围是E以下的所有子级别的F
E+F	相邻兄弟选择器	作用在E下面相邻的同级别的一个F
E~F	通用兄弟选择器	作用在E下面相邻的同级别的所有F

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

啊侠

关注

0
点赞
踩
0

收藏

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

初识CSSCSS：Cascading Style Sheet 层叠样式表CSS是表现HTML文字样式的语言，在HTML中可以修改字体、颜色等各种样式。CSS的优点内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS ，有利于网页被搜索引擎收录CSS的基础语法CSS...
复制链接

扫一扫