博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端 --> CSS基础
阅读量:5874 次
发布时间:2019-06-19

本文共 2924 字,大约阅读时间需要 9 分钟。

*****2019.05.30 补充的 css样式:    *******

前端之CSS基础

  一、语法结构
  二、三种引入css样式的方式
  三、学习css的流程

写在前面

css:层叠样式表万行代码,注释先行:/*单行注释*/ /* 多行注释 */

一、语法结构:

选择器 {
属性:属性值;属性:属性值;}

二、三种引入css样式的方式

1.head内style标签内部直接书写css代码2.link标签引入外部css文件 3.直接在标签内通过style属性书写css样式 ps:注意页面css样式通常都应该写在单独的css文件中

三、学习css的流程

3.1 先学如何直接查找标签
(1) 基本选择器     标签选择器     id选择器     类选择器     通用选择器(2) 组合选择器     后代选择器     儿子选择器     毗邻选择器     弟弟选择器(3) 属性选择器补充:分组与嵌套(4) 伪类选择器(5) 伪元素选择器
3.2 如何修改标签样式
(1) 宽高、字体(2) 字体颜色(3) 文本属性 (4) 背景属性 (5) 边框 (6) 画圆 (7) display属性 (8) visibility:hidden与display的区别

 

3.1 先学如何直接查找标签
(1) 基本选择器
标签选择器    id选择器    类选择器    通用选择器
 
    
第二天的网页
用来做对比的
这是第一句话
这是第二句话
这是第三句 这是第四句
这是第五句话
基本选择器

 

 

(2) 组合选择器
后代选择器    儿子选择器    毗邻选择器    弟弟选择器
    
第二天的网页
这是div里面的span1
这是div里面的span2

这是div里面的div里面的span

这是第二句话
这是第三句
组合选择器

 

(3) 属性选择器

    
第二天的网页

只有属性名的p

有属性名又有属性指的p1

有属性名又有属性指的p1

有属性名又有属性指的p2

有属性名又有属性指的p3
属性选择器

 

 

补充:分组与嵌套

    
第二天的网页
this is div1

this is p1

this is span1

this is p2

this is span2
分组与嵌套

 

(4) 伪类选择器

    
第二天的网页 搜狗 百度 500px
伪类选择器

 

(5) 伪元素选择器

******************************这里有个东西***************************

    
第二天的网页

这是一段话啊,但是我不知道写些什么东西!

这是也一段话啊,但是我也不知道写些什么东西!
伪元素选择器

 

3.2 如何修改标签样式
(1) 宽高、字体(2) 字体颜色(3) 文本属性 (4) 背景属性 (5) 边框 (6) 画圆 (7) display属性 (8) visibility:hidden与display的区别

******************************这里有个东西***************************

 

    
第二天的网页
这是一个div

这个是为了试颜色的1

这个是为了试颜色的2

这个是为了试颜色的3

这个是为了试颜色的4

这是一个超链接

我也不知道为什么下面会出现这个讨厌的横线,只知道去掉div的css会消失

标签样式

 

******************************这里有个东西***************************

 

******************************这里有个东西***************************

    
第二天的网页
这是一个div
this is div too
this is div too too
上面那张图的--背景属性

 

    
第二天的网页
这还是个div
这是一个圆
下面那张图的 --背景属性--例子

 

******************************这里有个东西***************************

 
    
第二天的网页
div1
div2
span1 span2

p1

p2

display属性

 

 

 

******************************下面是总结**********************************

总结:选择器的优先级:    思路:        相同选择器,不同的引入方式        不容的选择器,相同的引入方式    行内样式 > id选择器 > 类选择器 > 标签选择器 标签通常都必须有的属性 id用来唯一标识标签 class 标签类属性,可以有多个值 ps:可以理解为Python中的继承 可以给任意的标签加任意的属性名和属性值

 

转载于:https://www.cnblogs.com/xt12321/p/10945890.html

你可能感兴趣的文章
可观察性驱动开发,探索未知之地
查看>>
Webpack构建兼容IE8
查看>>
Deis发布1.4版本,支持Microsoft Azure
查看>>
解读2016之Golang篇:极速提升,逐步超越
查看>>
原创:新手布局福音!微信小程序使用flex的一些基础样式属性(二)
查看>>
Swift 烧脑体操(二) - 函数的参数
查看>>
用Elm语言降低失败的风险
查看>>
荷兰商业银行使用精益领导力推行改进
查看>>
Java 10新特性前瞻
查看>>
每秒解析千兆字节的JSON解析器开源,秒杀一大波解析器!
查看>>
搜狗回应“统计加班时长裁员”;多家国产浏览器限制访问996.ICU;波音推迟737 Max软件修正丨Q新闻...
查看>>
【转】前端——实用UI组件库
查看>>
Confluence 6 配置避免管理员联系表单垃圾
查看>>
Leetcode打卡 | No.25 k 个一组翻转链表
查看>>
webpack4.0各个击破(8)—— tapable篇
查看>>
shell技巧2 - 图片旋转缩放转换格式等
查看>>
Apache Tika使用报告
查看>>
stddef.h头文件学习
查看>>
python3-----数据结构
查看>>
第4天,函数进阶
查看>>