我的位置:首页 > 前端开发>Html/CSS

前端入门笔记之CSS篇

时间:2020-03-24 17:09:00 来源:互联网 作者: 神秘的大神 字体:

OXO1 写在前面

一.html和css

1.HTML和CSS的对比

(1)HTML只关注语义和结构,主要是对网页元素的整理和分类。
(2)CSS的主要使用场景就是美化页面,布局页面。
(3) CSS和HTML搭配使用,实现网页结构,表现分离。

2.CSS概述

(1)概念

CSS是叠层样式表(Cascading Style Sheets),也称为CSS样式表或级联样式表。
也是一种标记语言。

(2)作用

CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等),图片的外形(宽高,边框样式,边距等)以及版面布局和外观显示样式。

(3)CSS语法

CSS主要是由选择器以及一条或者多条申明组成。

选择器  {
属性1:  值1; 
属性2:  值2;
}
demo :
p  {
    color:  red;
    font-size: 12px;
   }

注:

选择器:指定修改样式的目标
声明: 要改成的样式

(4)CSS注释:

/* 我是被注释掉的内容 */

OXO2 CSS上

选择器分为:基础选择器和复合选择器两大类。

一. 基础选择器

基础选择器分为:标签选择器,类选择器,id选择器和通配符选择器。

1.标签选择器

(1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按照标签分类,为页面中某一类型的标签,指定统一的CSS样式。
(2)语法
标签名  {
    属性1:  值1;
    属性2:  值2;
    ....
    }
demo :
<style>
h1 {
   color: blueviolet;
   }
h2 {
  color: red;
 }
h3 {
    color: yellow;
    }
</style>
<body>
    <h1>我是标题1,我用了css样式</h1>
    <h2>我是标题2,我用了css样式</h2>
    <h3>我是标题3,我用了css样式</h3>    
</body>

2.类选择器

(1)使用类选择器可以实现为不同的标签差异化样式。
(2)语法:
/*定义*/
.类名 {
       属性1: 值1
       属性2: 值2
       ....
       }
/*调用*/     
<div class='类名'>  xxxx </div>     

类选择器口诀:

样式点定义

class来调用

一个或多个

开发最常用

注意:

长名称或者词组可以使用中横线来为类选择器命名
(3)demo:
<style>
   .blueviolet {
              background-color: blueviolet;
              }
    .color {
            color: cyan;
            }
    .box {
          font-size: 35px;
         }
</style>
</head>
<body>
    <div class="blueviolet color box">吵过,闹过,疯狂过,却从来没有后悔过,我们越来越笃定地相信,天长地久也不久。</div>
</body>
注 :

可以一次调用多个选择器,中间用空格分开。

3.id选择器

(1)语法
/*定义*/
#id名 {
        属性:  属性值;
      }
/*调用*/
<div id="id名"></div>
口诀 :
 #号来定义
 id来调用
 只能调用一次
注意点:
id选择器一次只能调用一个
 一个选择器只能调用一次
demo:
<style>
  #box {
        font-size: 35px;
        }
</style>
<body>
    <div id="box">第一次调用</div>
</body>

4.通配符选择器

语法
* {
    属性:属性值;
 }
注意点

通配符不需要调用,自动的就给所有的元素使用。

二.CSS字体样式属性

1.字体系列

 p {
    font-family: “字体1",“字体2";
 }

2.字体大小

p {
    font-site: 20px;
}

单位:px(像素)

3.字体粗细

p {
    font-weight: 属性值;
}
属性值:
normal 默认值:不加粗
bold 自定粗体:加粗
100-900  :400等于normal 700等于bold
没有单位

4.文字样式

font-style: 样式;
样式:
normal :默认
italic : 斜体

5.复合属性的写法

p {
    /*font:font-style font-weight font-site/line-height font-family;*/
   font: italic 700 20px "宋体";
}

注:

1.使用字体复合属性的时候,顺序不能颠倒。

2.至少要有font-size和font-family

三.文本样式属性

1.文本颜色

div {
    color: 颜色;
    }
颜色的三种表现形式
/*预定义颜色值*/
color: red;
/*16进制  最常用*/
color: #FF0000
/*RGB*/
color: rgb(255,255,255)或者rgb(100%,0%,0%)

2.文本对齐

div {
    text-align: 对齐方式;
}

对齐方式:

right 右边
left 左边
center 居中对齐

4.装饰文本

div {
    text-decoration: 装饰方式
   }

装饰方式

none 默认
underline 下划线(链接a自带)
overline 上划线
line-through   删除线

5.首行缩进

p { 
    text-indenx: 缩进;
}

单位

px  像素
em  相对单位,相对于当前元素(font-size)1字的大小,如果没有设置当前元素没有设置大小,则会按照父元素的1个文字大小。

6.行间距

p { 
    line-height: 行高
}
行间距 = 上间距 + 文本高度 + 下间距

四,CSS引入方式

CSS样式表的分类(根据书写的位置来分)

内部样式表(嵌入式)
行内样式表
外部样式表(链接式)

1.内部样式表(嵌入式)

嵌入式样式表指的是把css写在HTML页面中,但是css是单独抽取出来放在style标签中。
语法 :

<style>
    div {
        属性: 属性值;
    }
</style>
<div style="width:100px;height:100px;background:red;"></div>>

2.行内样式表(内联样式表)

内联样式表是在元素标签内部的style属性中设定css样式,中间用";"隔开。
语法:

<div style="width:100px;height:100px;background:red"> 键盘敲烂,去拾破烂</div>

4.外部样式(链接式)

语法 :

 <link> rel="stylesheet" href="css文件路径”>

OXO3 CSS中

一.CSS复合选择器

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

语法 :

元素1 元素2 { 样式声明
}
demo :
ul li { 样式申明 }
注释:
元素2必须是元素1的后代元素。

后代选择武器是对**后代元素**起作用

2.子选择器

子选择器只对某元素的最近一级子元素起作用。

语法 :

元素1>元素2 { 样式声明 }

3.并集选择器

并集选择器可以选择多组标签,同时定义样式。
语法:

元素1,
元素2,....
      { 样式声明}

注:后代元素和子元素的区别

子元素: 只有嵌套里面的第一个元素才能称为子元素。

后代元素:儿子,孙子,重孙子等等都包括在内的元素。

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,或者选择第一或者第n个元素。例如:链接伪类,结构伪类等。

(1)链接伪类选择器
a:link  /*选择所有未被访问的链接*/

a:visited /* 选择所有已被访问的链接 */

a:hover    /*选择鼠标指针位于其上的链接*/

a:active   /*选择活动链接(鼠标按下未谈起*/

注意点:

1.链接伪类标签的顺序(lvha) :a:link  a:visited a:hover  a:active(不按照顺序,不会生效)

2.a标签在浏览器中有默认的样式,需要根据需求更改样式。
(2):focus伪类选择器

:focus伪类选择器用于选取获得焦点(光标)的表单元素。

语法 :

input:focus{
        属性: 属性值;
}
(3)结构伪类选择器(css3)
:first-child:选取父元素的首个子元素的指定选择器
:last-child:选取父元素的最后一个子元素的制定选择器
:nth-child(n):匹配属于父元素的第N个子元素,不论元素的类型
:nth-last-child(n):匹配从父元素最后一个子元素开始倒数的子元素

代码示例:

<style>
    li:first-child{ /*选择第一个子元素*/
        color: red;
    }
    li:last-child{ /*选择最后一个子元素*/
        color: blue;
    }
    li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/
        color: orange;
    }
</style>
</head>
<body>
  <ul>
    <!-- 我是第一个,显示red -->
    <li>第一个子元素</li>   
    <li>第二个子元素</li>
    <!-- 我是第三个,显示orange-->
    <li>第三个子元素</li>
    <li>第四个子元素</li>
    <li>第五个子元素</li>
    <li>第六个子元素</li>
    <!-- 我是最后一个,显示bluse -->
    <li>第七个子元素</li>
  </ul>
</body>

二.CSS元素显示模式

1.概念

元素显示模式就是元素(标签)以什么方式进行显示。

2.分类

分为块元素和行内元素

(1)块元素

常见的块元素

~