(前端基础)CSS(一)

了解

Cascading Style Sheet：层叠级联样式表

CSS：表现层（美化网页）如：字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动

css优势： 

1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录

CSS的四种导入方式

行内样式

在需要设置的标签后面加style。优先级最高

css内部样式

可在html文件中的head标签中写如下：

<style>
  选择器{
        声明1；

        声明2；

        声明3；
    }
</style>

链接式外部样式

在文件恰当位置添加一个css文件

在需要引用样式的HTML文件的head标签中添加link标签。

<link rel="stylesheet" href="css文件位置">

 内部样式与外部样式优先级一致，从上到下，谁先写，谁的优先级就高。

导入式外部样式（了解）

先在head标签中添加style标签

<style>
    @import "css路径";
</style>

选择器

作用： 选择页面上的某一个或者某一类元素

标签选择器

会选择到页面上所有的这个标签的元素（选择一类标签），标签选择器优先级最低

标签选择器{

        声明1；

        声明2；

}

类选择器class

在标签后加class，class属性值为自定义，class值相同的为一组，可以复用，类选择器优先级>标签选择器（选择所有class属性值一致的标签）

<h1 class="类名称"></h1>

样式引用时，格式如下：

.类名{

        声明1；

        声明2

}

id选择器

在标签后加id，id属性值为自定义，id全局唯一,优先级最高

<h1 id="id名称"></h1>

样式引用时，格式如下：

#id名{

        声明1；

        声明2

}

优先级对比：id选择器>类选择器>标签选择器

层次选择器

根据以下框架，写HTML文件的body结构

红色为类选择器，紫色为id选择器

HMTL如下：

后代选择器

在某个元素的后面,eg:body后面的所有p标签

标签1  标签2{

        声明1；

}

body后面的p标签全部设置为红色

 

类tex后面的p标签全部设置为黄色背景

子选择器

某个标签(选择器)的子标签，eg：body标签后面的p标签，该处p标签不包含无序列表中的p标签

标签1>标签2{

        声明1；

}

body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色

相邻选择器

某个标签（选择器）的相邻（下一个元素），eg：类选择器action的相邻标签 

选择器+标签{

        声明；

}

li的相邻li标签设置为红色字体

id选择器的同级p设置为蓝色背景，tex选择器的同级p设置为黄色背景，action的同级p设置为红色字体

通用选择器

选中元素的向下的所有兄弟元素

选择器+标签{

        声明；

}

类选择器action的相邻p（所有下一个）元素，设置为橙色

结构伪类选择器

伪类选择器格式：

标签：参数{

        声明；

 }

first-child:第一个元素 

last-child：最后一个元素

标签：nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择

nth-of-type(2):选择父元素下的p标签的第几个，根据类型选择

扩展：hover，鼠标移动改变效果

属性选择器 

设置10个标签，每个标签中包含许多属性，为a标签设置默认样式，如下

<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item "  >3</a><a href="images/123.png" class="links item "  >4</a><a href="images/123.ipg" class="links item "  >5</a><a href="abc" class="links item "  >6</a><a href="/a.pdf" class="links item "  >7</a><a href="/abc.pdf" class="links item "  >8</a><a href="abc.doc" class="links item "  >9</a><a href="abcd.doc" class="links item last"  >10</a>
</p>

默认样式：

<style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}</style>

a标签中存在id属性的元素

标签：[属性名]{

        声明；

}

选择id属性中属性为first的元素 

标签：[属性名=属性值]{        //=是绝对等于

        声明；

}

class属性中属性值包含link的元素 

标签：[属性名*=属性值]{        //*=是包含这个元素

        声明；

}

 选中以href属性中以http属性值为开头的元素 

标签：[属性名^=属性值]{        //^=是以这个属性值开头

        声明；

}

 选中以href属性中以pdf属性值为结尾的元素 

标签：[属性名$=属性值]{        //$=是以这个属性值结尾

        声明；

}

字体样式

span标签：重点突出的字，使用span标签

• font-family:字体样式
• font-size:字体大小
• font-weight:字体粗细
• color:字体颜色