ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS基础

2021-07-28 19:05:33  阅读:224  来源: 互联网

标签:color eg 基础 语法 样式 选择器 CSS 属性


一、CSS概念

CSS——cascading style sheets(层叠样式表)

作用:规定HTML元素如何在网页中显示

特点:实现了结构与表现相分离,提高了网页的可维护性

二、CSS语法

CSS是由选择器和声明两大部分组成,声明又是由属性和属性值组成,即:

​ 选择器{属性:属性值;}

eg:
h1{color:red;}

三、样式表的创建

1.内联样式(行间或行内样式)

语法:

<标签 style=“color:red;”>hello</标签>

eg:
<h1 style="color:blue">花间一壶酒,独酌无相亲。</h1>

2.内部样式(嵌入式样式)

语法:

<style>

        h1{

            color: cornflowerblue;

        }
 </style>

注:建议将style放入body

3.外部样式表

步骤:首先创建一个后缀名为.css的外部文件,然后在HTML页面的head部分通过link标签引入

语法:

<link rel="stylesheet" href="demo.css">

注:rel用来设置引入文件和当前文件之间的关系

★★样式表的优先级

​ 当在同一个HTML页面中出现多种样式表时,我们采取就近原则,即离被设置的元素越近,优先级越高

注:当在样式中出现 “!important”关键词时,不再遵循就近原则,优先级最高

★★link和@inport的区别

  1. 本质区别

    link是HTML标签,除了可以引入css文件外,还能引入其他文件,@import属于css范畴的写法,只能引入css文件

  2. 加载顺序不同

    link引入的css文件和页面同时加载,@import引入的css文件在页面加载完成后载入

  3. 是否有兼容性问题

    link无任何兼容性问题,所有浏览器都支持,@import在IE5以下浏览器不支持

  4. 是否支持js改变样式

    link支持js控制dom改变样式,@import不支持

四、CSS选择器

1.id选择器

语法: <标记 id=“id名”>你好</标记>

eg:

<h1 id="city">相逢何必曾相识</h1>

样式中:

#city{color:red;}

注:a)id命名要语义化,不能是汉字、纯数字,或以数字开头,或者关键词

常用命名方法:驼峰命名法(myFavCity)

下划线连接命名法(my_fav_city)

b) id名是唯一的,不能出现同名的id

2.class选择器

语法:<标记 class=“类名”></标记>

eg:

<h1 class="myFavCity">我最喜欢的城市是北京</h1>

样式中:

 .myFavCity{

            color: aqua;

        }

注:a)class名也要语义化,常用命名方法同id

​ b)我们可以给具有相同样式的元素添加相同的class名

​ c)当一些元素即具有相同的样式,又有某些样式不相同时,就需要用到类名词列表的用法

eg

 <div class="box box1">小A</div>

样式中:

 .box{

            color: royalblue;

        }

        .box1 {

            background-color: #999493;

        }

3.标签选择器

语法:标记名称{属性:属性值;}

eg:

p{color:red;}

4.后代选择器(包含选择器)

语法:选择符1 选择符2{属性:属性值;}

eg:

.ul-one li {color: bisque;}

注:选择符1和选择符2必须是包含与被包含的关系,才可使用后代选择器

5.群组选择器

语法:选择符1,选择符2,选择符3{属性:属性值;}

eg:

h1,h2,h3,h4,h5,h6,strong,b{

            /* 去掉加粗 */

        font-weight: normal;

    }

6.通配符选择器

语法: *{margin:0;padding:0;}

注:*匹配所有HTML元素

7.伪类选择器

语法:选择器:hover{属性:属性值;}

注:超链接的四个状态,按照顺序依次为

  /* 超链接的四个状态 */

        a:link{  /*链接的初始状态,链接没有被访问过的状态*/

            color: greenyellow;

        }

         a:visited{  /*链接访问过后的状态 */

            color: gray;

        }

        a:hover{  /*鼠标划过时的状态*/

            color: yellow;

        }

        a:active{ /*鼠标按下(链接被激活时的状态)*/

            color: darkred;

        }

记忆方法:爱恨原则

注:实际应用中,会简写a的四个状态,如下:

a {

            color: black;

            /* 去掉下划线 */

            text-decoration: none;

        }

        a:hover {

            color: rgb(47, 36, 207);

        }

注:可以给任意元素添加:hover的划过效果(IE6只识别a的划过)

标签:color,eg,基础,语法,样式,选择器,CSS,属性
来源: https://blog.csdn.net/qq_45933712/article/details/119187445

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有