web前端day03-网页CSS

/ 默认分类 / 没有评论 / 205浏览
day03

CSS

什么是CSS

Cascading层叠,Style样式,Sheet表层叠样式表,CSS用于美化页面,使用CSS可以把样式代码和html分离

如何在html页面中引入CSS

1. 内联样式:在标签内部添加style 值为样式代码,弊端是不能复用

<h1 style="background-color: red;border: 1px solid green;">我是一个h1</h1>

2. 内部样式:在head标签内部,添加style标签 标签内写样式代码,好处是能在当前页面复用,弊端是不能多页面复用

 <style type="text/css">
    img{
        border: 5px solid blue;
        width: 100px;
    }
    </style> 

3. 外部样式:在单独的css文件中写样式代码,在head标签内部通过link标签引入,好处是可以多个页面复用

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

三种引入方式的优先级

  1. 内联样式优先级最高
  2. 内部和外部相同,后执行的覆盖前面执行的

标签选择器

id选择器

类选择器

属性选择器

后代选择器

子元素选择器

分组选择器

任意元素选择器(所有元素选择器)

伪类选择器

CSS中的常用属性

颜色的赋值方式

  1. 通过颜色单词赋值red green blue yellow pink purple
  2. 通过6位16进制赋值 三原色rgb(red green blue)三原色取值范围0-255
  3. 通过3位16进制赋值 共色 #f00
  4. 通过3位10进制赋值 红色 rgb(255,0,0)
  5. 通过4位10进制赋值 后on个色rgba(255,0,0,0-1)

设置背景图

 /*设置背景图片*/
        background-image: url("../imgs/a.jpg");
        background-size: 200px 200px;
        /*禁止重复*/
        background-repeat: no-repeat;
        /*控制背景图片的位置*/
        background-position: right bottom;
        /*控制背景图片的位置 left center right top bottom*/
        /*background-position: left center;*/
        background-position: 100% 90%;

布局相关属性(盒子模型)