中国平面设计和网站建设,台州网站制作方案,做家教用什么网站,做产品网站建设目录
css的概念
css的优势
css的基本语法
html中引入css样式
CSS基本选择器 选择器的使用
初级选择器#xff1a; 标签选择器 类选择器 id选择器
高级选择器(结构选择器#xff09;
①后代选择器(E F)
②子选择器(EF)
③相邻兄弟选择器(EF)
④通用兄弟选择器(…目录
css的概念
css的优势
css的基本语法
html中引入css样式
CSS基本选择器 选择器的使用
初级选择器 标签选择器 类选择器 id选择器
高级选择器(结构选择器
①后代选择器(E F)
②子选择器(EF)
③相邻兄弟选择器(EF)
④通用兄弟选择器(E~F)
属性选择器 css的概念
美化网页对字体颜色边距高宽度背景图片等设定 css的优势
内容与表现分离网页表现统一易修改 丰富的样式使页面布局更加灵活 减少网页代码量 css的基本语法
选择器{ 声明属性值 } 例如 style typecss h1{ font-size:14px; color;#5c5c5c; } /style html中引入css样式 CSS样式作用css优先级行内样式内部样式外部样式就近原则行内样式使用style属性引入css样式直接在标签中设置样式h1 stylecolor:颜色/h1内部样式css代码写在head的style标签中styleh1{color;grren;}/style优点方便在同页面修改缺点不利于在多页面共享代码以及维护对内容样式分离的不够彻底外部样式链接式导入式 链接式 导入式 CSS基本选择器 id选择器类选择器标签选择器 不遵守就近原则 标签选择器h1-h6,pimg 语法标签选择器{属性值}类选择器.class{font-size:16px} 语法标签名 class内容/标签名id选择器#id{属性值} 选择器的使用 初级选择器 ①ID选择器(#id{}) ②类选择器(.class{}) ③标签选择器(p{}) 标签选择器 p{font-size: 15px;color: aqua;} 类选择器 .bbb{font-size: 10px;color: #4d4d4d;}span classbbb也是要花力气去/span id选择器 #aaa{font-size: 20px;color: chartreuse;}span idaaa日照香炉生紫烟/span 1,标签选择器直接应用HTML标签 2,类选择器可以在页面多次使用 3,id选择器在一个页面只能使用一次 高级选择器(结构选择器 选择器类型功能描述 E F 后代选择器 选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 EF子选择器 选择匹配的F元素,且匹配的F元素是四配的E元素的子元素 EF相邻兄弟选择器 选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面 E~F通用兄弟选择器 选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素 ①后代选择器(E F) 后代选择器 所有的有血缘关系的后代 headmeta charsetUTF-8titleTitle/titlestyle /*后代选择器 所有的有血缘关系的后代 */body p{background: crimson}/style
/head
body
p111111/p
p11111/p
p111111/p
ullip2222/p/li //注意这里有个p标签li2222/lili222222/li
/ul
/body 运行结果如下 ②子选择器(EF) 子选择器 他的儿子 但是不包括孙子 style/*子选择器 他的儿子 不包括孙子 */bodyp{background: pink}
/style
body
p111111/p
p11111/p
p111111/p
ullip2222/p/lili2222/lili222222/li
/ul 运行结果如下 ③相邻兄弟选择器(EF) 相邻兄弟选择器 同级同一个地方的后面的一个邻居 style/*相邻兄弟选择器 同级同一个地方的后面的一个邻居 */.bbbp{background: aqua}/style
/head
body
p111111/p
p classbbb11111/p //他的后一位
p111111/p
p111111/p
ullip2222/p/lili2222/lili222222/li
/ul
p111111/p 运行结果如下 ④通用兄弟选择器(E~F) 通用兄弟选择器; 后面所有的元素 style/*通用兄弟选择器; 后面所有的元素*/.aaa~p{background: gold}/style
/head
body
p111111/p
p classaaa11111/p
p111111/p
p111111/p
p111111/p
ullip2222/p/lili2222/lili222222/li
/ul
p111111/p
/body 运行结果如下 属性选择器 属性选择器功能描述E[attr]选择匹配具有属性attr的E元素E[attrval]选择匹配具有属性attr的E元素并且属性值为cal(区分大小写)E[attr^val]选择匹配元素E且E元素定义属性attr属性值以val开头的字符E[attr$val]选择匹配元素E且E元素定义属性attr,属性值以val结尾的字符E[attr*val] 选择匹配元素E且E元素定义属性attr其属性值包含val 字符val与属性值任意位置相匹配 stylep[id]{color: blue}p[id红色]{color: red}p[id^绿色]{color: green}p[class$黄色]{color: yellow}p[class*粉色]{color: pink}/style
/head
body
p id属性值具有id属性的数据值变为蓝色!/p
p id红色具有id属性且属性值为红色的数据值变为红色!/p
p id绿色的蔬菜具有id属性且属性值以绿色开头的数据值变为绿色!/p
p class菠萝是黄色具有class属性且属性值以黄色结尾的数据值变为黄色!/p
p class花瓣中有粉色的并且I like!具有class属性且属性值中包含粉色的数据值变为粉色!/p
/body 运行代码如下
