通用选择器 css的继承性和叠加性 行级标签 块级标签 行内会计标签 css文字属性
时间:5年前 阅读:6174
通用选择器 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,我们将及时处理。
微信扫码关注
更新实时通知
网友评论