Day4-CSS的基本概念

文章目录CSS基本概念:一、选择器二、 三种连接样式1.行内样式(内嵌样式):2.内联样式:3.外部样式(外联样式):三、字体相关属性

CSS基本概念:

1.CSS(Cascading Style Sheet) 层叠样式表

一、选择器

1.标签:`<p><div>`…之类的标签 使用方式:直接输入标签名
2.类(class):class名字 使用方式:输入点+class名
3.ID:(ID)名 使用方式:输入#+id名
一般来说我们写css文件的时候用的是第二种选择器,
class名;这是因为id名一般被用作js的选择器
给class命名是有规范的,像xxx-xxx这样做的好处是
让你的代码更清晰别人更容易看懂

二、 三种连接样式
1.行内样式(内嵌样式):

<h1 style="color: blue;">绝句</h1>

直接写在标签里,使用style属性,只对当前标签有效,
页面内容和表现形式是高度耦合的,不利于分工合作

2.内联样式:

<style>
p{
font-size: 24px;
}
</style>

内部样式是在head部分使用<style>标签,样式对当前页面有效,
内容和表现形式实现了一定程度的分离,但不彻底。

3.外部样式(外联样式):

#text1{
color: pink;
}
.text2{
text-align: left;
}

<link rel="stylesheet" href="css/css01.css">

外部样式样式需要一个link标签与html连接起来,内容与表现形式完全分离
,而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现

三、字体相关属性

1.text-algin(对齐方式):center/left/right
2.font-size(字体大小):56px/xxpx
3.font-family(字体体系):”黑体”/”幼圆”
4.font-style(是否倾斜):italic(倾斜)/
normal(正常)
5.font-weight(字体粗细):100/200/
normal (400) /bold (700) /bolder
6.font-variant(是否大写):normal/small-caps(小型大写)
7.color(字体颜色):blue/red/pink/#FFFFFF/#F6F6F6
8.text-decoration:none(默认格式,无)/underline(下划线)
overline(上划线) /line-through(删除线)
9.direction(文本方向):ltr(left to right、从左往右)
rtl(right to left、从右往左)
10.text-transform:none(默认)/capitalize(首字母大写
uppercase(全部大写)/lowercase(全部小写)
11.line-height(行高):normal/xx_px
12.letter-spacing(字符间距);2px/xx_px
13.word-spacing(单词间距):normal/2px/xx_px (加空格才有效果)

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Day4-CSS的基本概念

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Day4-CSS的基本概念
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏