CSS基础语法一

CSS基本语法

CSS样式

内联样式(行内样式)

当行代码设置属性

存在单属性和多属性


页内样式

当先页面设置属性



外部样式

在单独的css文件中书写,用link标签来引用

  当前html文件内写
  //路径

样式优先级(就近原则):行内样式>页内样式>外部样式

CSS选择器

CSS标签选择器

标签选择器:直接通过标签名获取

标签选择器测试

CSS类选择器

每个标签都有个class属性,可以自定义名称.通过.类名访问(示例中的zhulei类名)

自定义类标签

自定义类标签


CSS id选择器

id选择器:注意id唯一,但是弱语言,语法不允许,虽然报错,不会出现问题.但是一定是错误的

自定义类标签


CSS 并列选择器(或者):直接叫或选择器

text id选择器或者text1 类选择器(多个,号),通过逗号连接

  
  
并列选择器测试text
并列选择器测试text1
#text,.text1 { color:red; }

CSS 复合选择器(并且):直接叫且选择器

text id选择器并且text1 类选择器,复合选择器不要留空格,不然会出问题

  
复合选择器测试
并列选择器测试text1
#text.text1 { color:red; }

CSS 后代选择器(子控件)

  1. 后代选择器:子标签,语法父标签写前面,空格写子控件.
  2. 直接后代选择器:直接子标签受影响,非直接子标签不受影响.
  3. 相邻兄弟选择器:直接理解字面意思,手心手背都是肉,前后相邻不影响
//后代选择器

后代选择器测试标签

div p { //div内的所有p子标签都影响 color:red; } ------------------------------------------------------------------- //直接后台选择器

直接后代选择器测试标签

非直接后代选择器测试标签

div > p { //div内的一级p标签直接子标签受影响,非直接子标签不受影响. color:red; } ------------------------------------------------------------------- 相邻兄弟选择器:示例的意思是div相邻的p div + p { }

CSS 属性选择器

jack属性选择器
jack属性选择器
jack属性选择器
//表示含有name属性的标签都受影响 div[name] { color:red; } //表示含有name属性且age属性的标签才受影响 div[name][age] { color:red; } //表示含有name属性的标签且name属性为jack都受影响 div[name = "jack"] { color:red; }

CSS伪类

伪类:简单介绍就是给标签特定状态设置样式(比如输入框获取焦点等)

    //比如点击状态下更改状态
    input:focus {
    }
    //鼠标停留的属性
    input:hover {
    }

    
    //需求:输入这一刻就改变输入框状态input在focus状态下的属性设置.
    input:focus {
    }

选择器优先级

选择器优先级:比如通过两种选择器都改变了一个标签谁的优先级高呢?

  1. 介绍一个优先级最低的选择器:通配符
* {
    color:red;
}

css选择器优先级规律:
不同类型的选择器遵循:

相同类型的选择器遵循:就近原则,叠加原则.(规律:范围定义越小,优先级越高,直接查询优先级数值都有对应的数字代表优先级).
important > 行内 > id选择器 > 类选择器(属性|伪类|伪元素) >标签选择器 > 通配符

复习:css中有多少选择器,语法,名称,以及意义??

你可能感兴趣的:(CSS基础语法一)