css基础学习

最新推荐文章于 2023-06-24 18:45:39 发布

呵离

最新推荐文章于 2023-06-24 18:45:39 发布

阅读量274

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/bbhe_work/article/details/51897866

版权

web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css样式顺序

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

继承

下面的是作用在h2的strong元素上：
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

h2 strong {
     color: blue;
     }

id 选择器和派生选择器

id为sidebar里面的p, h2元素格式：

 #sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
 #sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }

下面是div元素id为inner：

div#inner {text-indent: 10%;}

类选择器

派生选择器
fancy类下面的td元素：
.fancy td {
    color: #f60;
    background: #666;
    }
元素类选择
td表单里面的fancy类：td.fancy {
color: #f60;
background: #666;
}
td.fancy {
    color: #f60;
    background: #666;
    }

属性选择器

//所有包含title属性的元素
 [title]{
    color: red;
}
//所有title为 hehe的元素
[title=hehe]
{
border:5px solid blue;
}

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

表单插入

外部：

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

内部：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

呵离

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础学习

css样式顺序浏览器缺省设置外部样式表内部样式表（位于标签内部）内联样式（在 HTML 元素内部）继承下面的是作用在h2的strong元素上： <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>h2 strong { color:
复制链接

扫一扫

专栏目录