css基础

1.元素

元素通常有两种形式：置换元素和非置换元素

置换元素指用来置换元素内容的部分不由文档内容直接表示，在HTML中，最常见的置换元素要属img,它的内容由文档之外的图像文件替换。如不指向外部内容，这个元素什么也表示不了。

input元素类似，根据类型的不同，会替换成单选按钮，复选钮和文本输入框

非置换元素 HTML元素大部分是非替换元素，即元素的内容由用户代理在元素自身生成的框中显示

块级元素与行内元素

块级元素独占一行，HTML中最常见的块级元素是p和div

行内元素在一行内生成元素框，不打断所在的行。HTML中最常见的行内元素是a

注意！！ 块级元素不能出现在行内元素中

行内元素： a b span img input select strong

块级元素: div ul ol li dl dd h1 h2 h3 h4 .. p

空元素: <br> <hr> <img> <input> <link> <meta>

行内元素不可以设置宽高,不独占一行

块级元素可以设置宽高,独占一行

 2.CSS引入HTML

普通引入

<link rel="stylesheet" type="text/css" href="basic.css">

候选样式表的引入

<link rel="alternate stylesheet" type="text/css" href="zany.css" title="Big Text">

link标签可以指定样式应用于何种设备

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen">

<link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="print">

 

 

style元素

<style type="text/css">
    此处写样式
</style>

@import指令

<style type="text/css">
    @import url(styles.css);
</style>

import指令也可以显示导入的样式表应用于何种媒体

@import url(zany.css) projection,print;
投影和打印设备

3.媒体查询

h1{
    color: maroon;
}

@media projection {
    body {background: yellow;}
}

媒体描述符      彩色打印设备

@import url(print-color.css) print and (color);

上面用到的是and逻辑关键字，其他的关键字还有not, only

not是对整个查询取反

@media not (color) and (orientation: landscape) and (min-device-width: 800px)
{
    
}

 only则是对不支持媒体查询的旧浏览器隐藏样式表

4.特性查询

用户代理是否支持特定的css属性，如果支持就会应用这段样式

@supports (color: black) {
    body {color: black;}
    h1 {color: purple;}
    h2 {color: navy;}
}