多个:<元素...">
美文网首页
第三章CSS基础(上)

第三章CSS基础(上)

作者: 恰我年少时 | 来源:发表于2020-11-09 20:50 被阅读0次

3.1css根据声明位置不同有三种使用方式:内联、外联、外部
<元素名 style="属性名:属性值">
多个:
<元素名 style=“属性名1:属性值 ; 属性名2:属性值2;……属性名n:属性值n"
例如为某标题设置样式
<h1 style="color:blue ; backgroud-color:yellow">标题<h1>

3.1.2内联样式表
位于<head>内部,例如
<style>
选择器{color:red}
</style>
3.1.3外部样式表
后缀名.css
<link rel="stylesheet" href="样式文件的路径">
除了不用写<style></style>外和内联一样

3.2css选择器
元素选择器、ID选择器、类选择器、属性选择器
3.2.1元素选择器
例p{backgroud:gray}
3.2.2ID选择器
在声明时要在id名前加上#。

id名{属性名1:属性值1;属性名2:属性值2……;}

test{color:red}

<p if="test" >这是一个段落</p>
3.2.3类选择器
类选择器可以将不同的元素定义为共同的样式。类选择器在声明时在前面加“ . "。
为了和指定的元素关联使用,需要自定义一个class名称。
.class名{属性名1:属性值1;属性名2:属性值2;……}
例如:
.red{color:red}
使用:
<h1 class = "red">这是标题,字体是红色</h1>
<p class="red">这是段落,字体是红色</p>
一个段落元素也可以用多个类样式

3.2.4属性选择器
属性选择器允许基于元素所拥有的属性进行匹配。
元素名 [元素属性] { 属性名1:属性值1;属性名2:属性值2……;}
例如,只对带有href属性的超链接元素<a>设置CSS样式
a [ href] ={ color:red; }表示将所有带有href 属性的超链接元素设置字体颜色为红色。
也可以根据具体的属性值进行CSS样式设置:
a [ href ]="http://www.baidu.com"]{
color:red;
}将属性值为百度的超链接设置为红色样式
如果不确定属性值的完整内容,可以用 [ attribute~=value关键词 ] 查找
a[ href = "baidu" ] {
color:red }
CSS注释: /*********************************/快捷键:"Ctrl"+"/"

相关文章

  • 第三章CSS基础(上)

    3.1css根据声明位置不同有三种使用方式:内联、外联、外部<元素名 style="属性名:属性值">多个:<元素...

  • react学习路线图

    基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...

  • CSS基础(上)

  • CSS设计彻底研究(复习)

    目录 第一章 HTML和CSS核心基础 1.2 在HTML中引入CSS的方法 第二章 选择器(暂时不学了) 第三章...

  • 1 CSS3 基础认知、选择器

    1、CSS3基础认知: (1).CSS3是在CSS2基础上新增了很多强大的功能,其拆分了很多"独立模块",迭代过程...

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • 6、登录页

    在注册页基础上改造即可 css增加

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • CSS3

    CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...

网友评论

      本文标题:第三章CSS基础(上)

      本文链接:https://www.haomeiwen.com/subject/ryerbktx.html