通用选择器 css的继承性和叠加性 行级标签 块级标签 行内会计标签 css文字属性
css部分：
<style ytpe="text/css">
/*伪类选择器
同一个html元素在不同状态下的不同样式
只有a元素和p元素可以使用
a:visited{color:#ooffoo} 已访问的链接
a:hover{color:#ffooff} 鼠标移动到链接上
a:active{color:#ooooff} 选定的链接*/
/*a{
font-size: 50px;
color: blue;
}
a:hover{
font-size: 100px;
background: green;
color: white;
}
*/
/*css继承性*/
/*子元素可以继承父元素的文字相关的样式*/
h1{
font-size: 35px;
color: blue;
}
/*css叠加性：不同选择器给同一个元素加的样式，可以同时生效*/
#title{
color: purple;
}
p{
border: 3px solid blue;
width: 500px;
height: 100px;
/*首行缩进*/
text-indent: 2em;
/* 文字粗细
注意不要加单位 正常状态是400，加粗是700，（800、900差别不大）也可以直接加单词 bold */
font-weight: 700;
/*文字倾斜*/
font-style: italic;
/*文字划线*/
text-decoration: underline;
}
img{
width: 300px;
height: 300px;
}
</style>
HTML部分：
<body> <a href="http://www.youku.com">优酷有好看的视频</a> <h1 id="title">这段时间<span>优酷</span>有好看的电视剧</h1> <!-- /*块级标签*/ /*1、要独占一行，比较霸道，不和其他元素呆在同一行*/ /*2、能设置宽度*/ --> <!-- 常见的块级标签有：div p h1~h6 ul li dl dt dd --> <p>我们是p标签</p> <p>我们是p标签</p> <p>我们是p标签</p> <!-- 行级标签 --> <!-- 1、能和其他元素待在同一行 --> <!-- 2、不能设置宽高 --> <!-- 常见的行级标签：a span strong u em --> <a href="">这个是a标签</a> <a href="">这个是a标签</a> <a href="">这个是a标签</a> <!-- 行内块级标签 1、能待在一行， 2、能设置宽高 常见的行内块级标签有 img input textarea --> <img src="yt01.jpg" alt="" /> <img src="yt02.jpg" alt="" /> </body>
原文链接：https://www.qiquanji.com/post/7750.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知