认识CSS(2)

1、css语法

P{color:red}

选择符:P

声明:{属性:值}

括号

换行、空格不敏感

div{color:red;}

P{fontsize:14px;color:blue;}

h1{

     width:20px;

     height:200px;

    }

2、css设置样式

案例:

p标签背景色为红色

h1标签字体颜色为绿色

span标签文本为14像素

(1)嵌入式css(推荐)

         <style>

                     p { background-color: red; }

                     h1 { color: green; }          

                     span { font-size: 14px; }

           </style>

(2)行内式css

<p style="background-color: red; ">我是一个段落标签</p>

3、css的注释

单行注释:/*注释内容*/

多行注释:

/*


*/

注意:注释不可嵌套

4、css的选择器

(1)标签选择器

(2)通配符选择器:*{属性1:属性值1;属性2:属性值2;}  其中*代表当前页面中的所有标签

通配符的穿透力很强,优先级高于继承的样式,会覆盖继承的样式,一般不用。

例:通过通配符选择器定义css样式,清除所有HTML标记的默认边距。

*{

margin:0;    /*定义外边距*/

padding:0; /*定义内边距*/

}

(3)ID选择器

#p1 { font-size: 20px; }

#p2 { font-size: 10px; }

id选择器帮助选择当前页面中唯一id值的标签,根据标签的id属性值进行选取设置样式,id选择器的符号是# id值 {属性:属性值;}

<p id="p1">段落1设置20px</p>

<p id="p2">段落2设置10px</p>

id选择器命名规范:字母开头、下划线、数字;不能出现标签名

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,378评论 0 40
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,798评论 32 459
  • 第6章 开始学习CSS,为网页添加样式 1、认识CSS样式CSS全称为“层叠样式表 (Cascading Styl...
    夏沫xx阅读 1,099评论 1 11
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,429评论 0 5
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,154评论 0 1

友情链接更多精彩内容